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