0

我正在尝试将一些列样式的 div 包装成一行。然后应用溢出：隐藏；到该行以使下一行中的任何浮动列对齐。

<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 回答