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

时间:2015-10-19 06:41:42

标签: html css html5 css3

我有这段代码:

<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的问题吗?我正试图做出最好的风格(不同高度的盒子)。

enter image description here

2 个答案:

答案 0 :(得分: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;
}

答案 1 :(得分:-1)

尝试添加CSS标记&#34; position:absolute&#34;到列类。

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