0

いくつかの列スタイルの div を行でラップしようとしています。次に、overflow:hidden; を適用します。行に移動して、次の行にある浮動列を整列させます。

<div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
</div>
<div class="row">
    <div class="col">Column 3</div>
    <div class="col">Column 4</div>
</div>
<div class="row">
    <div class="col">Column 5</div>
    <div class="col">Column 6</div>
</div>

次に使用します。

.row{ overflow:hidden; }
.col{
    width:50%;
    float:left;
}

問題は、より大きな画面で行の div を効果的に移動して、3 つの列を表示できるようにすることです。

<div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
</div>
<div class="row">
    <div class="col">Column 4</div>
    <div class="col">Column 5</div>
    <div class="col">Column 6</div>
</div>

そして使用：

.row{ overflow:hidden; }
.col{
    width:33%;
    float:left;
}

これは CSS では実行できないことはわかっていますが、列をラップしたり、使用できる CSS を使用してこの効果を得たりする他の方法はありますか? 私が思いついた最高のものは、余分な要素を使用したかなり醜いバージョンです:

http://codepen.io/djave_co/pen/EIHzt

画面のサイズを変更すると、その動作を確認できますが、あまりきちんとした意味ではありません。

4

1 に答える 1

0

そのようなことを達成したいですか？-> http://codepen.io/anon/pen/LwutG

CSS

.clear {clear: both;}

.col{
  border:2px solid #eaeaea;
  min-height:20px;
  margin-bottom: 10px;
  width:100%;
  float:left;
  box-sizing:border-box;
}


@media screen and (max-width:1400px) {
        .col {
     width: 33.333333%;
  }
}

@media screen and (max-width:800px) {
        .col {
     width: 50%;
  }
}

アップデート

すべての列で高さを等しく設定します。http://jsfiddle.net/C86b8/

于 2013-10-25T08:54:25.730 に答える