CSS：将div水平设置为2行 [英] CSS: Set divs horizontally in 2 rows

问题描述

假设我有

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

我想要的是在两行中放置.single divs，如水平从左到左这个简单的方法：第一个div将在左上角，第二个将放在第一个，第三个将放在第一，第四将放在第三个之下，依此类推：

What I want to have is to plase the .single divs in 2 rows like bricks horizontaly from left to right this simple way: 1st div will be in left top corner, 2nd will be placed below 1st, 3rd will be placed next to 1st, 4th will be placed below 3rd and so on like:

1 3 5 7 9
2 4 6 8

所有div都有相同的大小。

All the divs has the same size.

我已经尝试过masonry.js，它的工作方式像一个魅力，但它的方式复杂的解决方案这么简单的任务（简单的解决方案很重要）。

I've tried with masonry.js and its working like a charm, but its way to complex solution for so simple task (simply solution is important).

小提琴操场

推荐答案

有一个CSS属性完全符合

There is a CSS property that does exactly that

http://tinker.io/8ff59

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

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

这篇关于CSS：将div水平设置为2行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！