CSS如何将包含div列表的div分割成2列

Question

这个问题对您来说是一个很好的挑战？

我有一个在MVC中动态填充div的divs ，我希望通过将列表拆分为 一半，将列表拆分为2列。

div的数目是未知的。

你会怎么做到这一点？

编辑：当我说分裂我的意思是从UI的角度来看，是所有。

马尔科姆

Answer 1

的一个基本方式，如果你不介意的列从左到右阅读是只显示孩子的div为inline-block的。

（PS，49％是由于边界等等，我敢肯定有一个更好的方法）

.child { 
 
    width: 49%; 
 
    display: inline-block; 
 
}

<div id="parent"> 
 
    <div class="child">some stuff</div> 
 
    <div class="child">some stuff</div> 
 
    <div class="child">some stuff</div> 
 
    <div class="child">some stuff</div> 
 
    <div class="child">some stuff</div> 
 
    <div class="child">some stuff</div> 
 
    <div class="child">some stuff</div> 
 
    <div class="child">some stuff</div> 
 
    <div class="child">some stuff</div> 
 
    <div class="child">some stuff</div> 
 
    <div class="child">some stuff</div> 
 
    <div class="child">some stuff</div> 
 
    <div class="child">some stuff</div> 
 
    <div class="child">some stuff</div> 
 
    <div class="child">some stuff</div> 
 
    <div class="child">some stuff</div> 
 
    
 
    
 
</div>

Answer 2

您可以使用float =风格在 '左' 到里面DIV

DEMO

Answer 3

可以使用inline-block显示属性的子元素，使width:50%;

注：请确保您的parent divfont-size是0这将有助于您将inline-block元素之间移除空间。

#parent{ 
    font-size: 0; 
} 
.child{ 
    font-size: 16px; 
    display: inline-block; 
    width:50%; 
} 

DEMO