Question

我需要这个result

只有两个DIVS，如下面的代码

以下是要处理的fiddle

修改

基于Sowmya回答（这是错误的）请注意我需要的数字是相同的订单

.content{
    padding:10px;     
    width:282px;
    height:90px;
    border:solid 1px #444;
}
.item{
    padding:5px;
    margin-right:5px;
    width:50px;
    border:solid 1px #999;
}

<div class="content">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>  
    <div class="item">12</div>  
</div>

谢谢

Answer 1

您可以使用CSS3 flex属性来实现结果。

以下是 DEMO 。

.content{
    padding:10px;     
    width:282px;
    height:105px; /*Height need to change*/
    border:solid 1px #444;
    display: flex;
    flex-flow: column wrap;
}
.item{
    padding:5px;
    margin-right:5px;
    width:50px;
    border:solid 1px #999;
}

Answer 2

我的解决方案是使用CSS3的列。（对不起，我不得不玩宽度和高度）=）

.content{
    padding:10px;     
    width:285px;
    height:105px;
    border:solid 1px #444;
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
}
.item{
    padding:5px;
    margin: 0 0 5px;
    width:50px;
    border:solid 1px #999;
}

http://jsfiddle.net/2gM2d/45/

Answer 3

将float:left添加到.item

.item{
    padding:5px;
    margin-right:5px;
    width:50px;
    border:solid 1px #999;
    float:left
}

<强> DEMO

Answer 4

将.content班级的宽度更改为134px，并在float:left班级中添加.item

这是Click Here

的小提琴

如何在列中设置div内的div

4 个答案: