以水平顺序而不是垂直顺序显示css列

Question

我有这段代码：

<div id="columns">
    <div id="box1">box1</div>
    <div id="box2">box2</div>
    <div id="box3">box3</div>
    <div id="box4">box4</div>
    <div id="box5">box5</div>
    <div id="box6">box6</div>
</div>

css：

.column {
column-count: 3;
column-gap: 0px;
column-fill: auto;
margin: auto;
}   

#box(n) {
display: inline-block;
padding: 0 10px;
margin: 10px 10px;
}

我得到了：

box1 box4
box2 box5
box3 box6

我想要的是什么：

box1 box2
box3 box4
box5 box6

任何人都可以帮我解决使用纯html / css的问题吗？我正试图做出最好的风格（不同高度的盒子）。

Answer 1

尝试使用float：

演示：http://jsfiddle.net/GCu2D/912/

<强> HTML

<div id="columns">
    <div id="box1">box1</div>
    <div id="box2">box2</div>
    <div id="box3">box3</div>
    <div id="box4">box4</div>
    <div id="box5">box5</div>
    <div id="box6">box6</div>
</div>

CSS：

#columns {
    width:400px; /* change it according to your design*/
}
#columns div {
    float:left;
    width:50%;/*so as to give equal width to div */
    outline:1px solid red;/*optional*/
    height:400px;/*use your own value*/
}
#columns:after {
    content:"";
    display:block;
    clear:both;
}

Answer 2

尝试添加CSS标记＆＃34; position：absolute＆＃34;到列类。

.column {
   column-count: 3;
    column-gap: 0px;
    column-fill: auto;
    margin: auto;
    position: absolute;
}