Javascript 如何在列中的div中设置div

我需要这个

仅使用两个

div

，如下所示

这是工作的秘诀

编辑

基于

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> 

.content{
填充：10px；
宽度：282px；
高度：90px；
边框：实心1px#444；
}
.项目{
填充物：5px；
右边距：5px；
宽度：50px；
边框：实心1px#999；
}
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12

---

谢谢

将

浮动：左

添加到

。项目

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

---

将

浮动：左
添加到
.item

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

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

这是一把小提琴，用于将
.content
类中的宽度更改为
134px
，并在
类中添加
float:left

这里有一个小问题
我的解决方案是使用CSS3的列。（很抱歉，我不得不玩弄宽度和高度）=）

我的解决方案是使用CSS3的列。（很抱歉，我不得不玩弄宽度和高度）=）

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

这是

.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;
}

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

这是

.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;
}

我就是这么想的。数字是从左到右，而不是从上到下，这就是我所想的。数字从左到右，而不是从上到下
在每两个div之后添加，以保持容器的高度。否则，您需要根据您的要求更改高度。阅读问题：）我需要相同顺序的数字
添加在每两个div之后，以保留容器的高度。否则您需要根据您的要求更改高度。阅读问题：）我需要相同顺序的数字
flex
在最新的Safari上还不支持。我认为我的更好。看我的…=）IE11支持它，IE10需要前缀。查看更多信息。谢谢你的回答，我选择@josephnvu answer，因为它更兼容浏览器。无论如何，我已经对你的答案投了赞成票：）
flex
在最新的Safari上还不受支持。我认为我的更好。看我的…=）IE11支持它，IE10需要前缀。查看更多信息。谢谢你的回答，我选择@josephnvu answer，因为它更兼容浏览器。不管怎样，我还是对你的答案投了赞成票：）谢谢你的答案，我对它投了赞成票。。你的解决方案能与IE一起使用吗？谢谢你的回答，我对它投了赞成票。。你的解决方案和IE一起工作吗？