Question

让我说我有

<div class="cont">
    <div class="single">1</div>
    <div class="single">2</div>
    <div class="single">3</div>
    <div class="single">4</div>
    <div class="single">5</div>
    <div class="single">6</div>
    <div class="single">7</div>   
</div>

我想要的是将这两个单独的div分成两排，就像砖块一样，从左到右，这个简单的方式：第一个div将在左上角，第二个将在第一个下方，第三个将在下一个到第1个，第4个将被放置在第3个以下，依此类推：

1 3 5 7 9
2 4 6 8

所有div都有相同的大小。

我已经尝试过使用masonry.js，它的工作就像一个魅力，但它通过复杂的解决方案来实现如此简单的任务（简单的解决方案很重要）。

fiddle playground

Answer 1

有一个完全符合

的CSS属性

http://tinker.io/8ff59

.cont {
    -webkit-columns: 5em;
    -moz-columns: 5em;
    columns: 5em; /* desired width of column */
}

http://caniuse.com/#feat=multicolumn

Answer 2

我认为你不能用结构的css做到这一点。

此结构应该可以帮助您获得所需的布局：

<div class="a">
   <div class="b">
       <div class="c">1</div>
       <div class="c">2</div>
   </div>
   <div class="b">
       <div class="c">3</div>
       <div class="c">4</div>
   </div>
</div>


<style>
div.a div.b {float: left; width: 100px;}
</style>

Answer 3

为了论证，假设您无法更改文档结构 - 您需要单独通过布局定义来完成此操作。

如果你知道你将拥有多少项，最简单的方法是使用内联块元素的CSS3列。你的.hesles是内联块，而.cont使用'columns'属性设置5列，每列宽足以容纳你的单身，同时使用max-height将内联块强制每两个项目放入新列。单体的最小尺寸足以阻止在同一条线上显示多个内联块。

您可以在此处将此效果视为jsfiddle：http://jsfiddle.net/mwjJG/25/：

.container {
    height: 240px;

    columns: 100px 5;
    -webkit-columns: 100px 5;
    -moz-columns: 100px 5;
    }

.single {
    display: inline-block;
    height: 100px;
    width: 100px;
    }

请注意，这不适用于IE＆lt; 10，除非您可以使用某种基于JS的shiv来添加对column属性的支持（CSS Pie可能会这样做）。

Answer 4

我在这里使用这个代码完成了这个：虽然它有点hackish。

我将三个div（最后三个）设置为“double”类

.cont .single {
    background: blue;
    color: white;
    width: 100px;
    height: 100px;
    margin: 10px;
    float:left;
    display: inline-block;
}
.cont .double {
    background: blue;
    color: white;
    width: 100px;
    height: 100px;
    margin: 10px;
    display:inline-block;
    float:left;
}

div:nth-child(5) {
    clear:left;
}

.cont {
    height: 220px;
    background: red;
}

Answer 5

我遇到了同样的问题并使用网格解决了。

这是您应该添加到容器中的 CSS：

.cont {
    height: 220px;
    background: red;
    display: grid;
    grid-template-rows: repeat(2, 100px);
    gap: 10px;
    grid-auto-flow: column;
    grid-auto-columns: 100px;
}

CSS：将div水平设置为2行

5 个答案: