顯示div的並排達到

Question

我有一個div，它會由n個div的

<div class="wrapper"> 
    <div class="parent"> 
     <div class="child"> top left  </div> 
     <div class="child"> mid left  </div> 
     <div class="child"> bottom left </div> 
     <div class="child"> top right </div> 
     <div class="child"> mid right </div> 
     <div class="child"> bottom right </div> 
    </div> 
</div> 

我想通過保持一些max-height對於任何包裝或顯示他們並排家長。

例如：前三個孩子將成爲第一列，接下來的三個將成爲第二列，最後一個將成爲第三列。

我試了一下display: inline-block,float: left,padding,max-height但沒有工作。

Answer 1

HTML

<div class="wrapper"> 
     <div class="parent"> 
<div class="col"> 
      <div class="child">one</div> 
      <div class="child">cas</div> 
      <div class="child">asds</div> 
</div> 
<div class="col"> 
      <div class="child">wdw</div> 
      <div class="child">abc</div> 
      <div class="child">def</div> 
</div> 
<div class="col"> 
      <div class="child">ghi</div> 
      <div class="child">jkl</div> 
      <div class="child">mno</div> 
</div> 
     </div> 
    </div> 

CSS：

.wrapper { 
max-width: 100%; 
} 
.col { 
width: 33%; 
float: left 
} 

編輯：更改以滿足您的要求。 如果你想要它自動安排像這樣，根據父母身高或物品數量或其他任何東西，你將不得不使用JavaScript。不可能單獨使用CSS。

Answer 2

.wrapper { 
width: 100%; 
} 

.child { 
width: 33%; 
float: left; 
} 

Answer 3

我爲你創建了一個小提琴，但是有改變列的安排。

fiddle

<div class="wrapper"> 
    <div class="parent"> 
     <div class="columnOne">one</div> 
     <div class="columnTwo">xzcx</div> 
     <div class="columnOne">cas</div> 
     <div class="columnTwo">cccccc</div> 

     <div class="columnOne">asds</div 
     <div class="columnTwo">ccccccccswsww</div> 
     <div class="columnOne">wdw</div> 
     <div class="columnTwo">ccccccccswsww</div> 



    </div> 
</div> 

.wrapper { 
    max-width:100%; 
} 

.parent { 
    width: 100%; 
    height:100%; 
    float: left; 
} 

.columnOne { 
    float: left; 
    width: 45%; 
} 

.columnTwo { 
    float: left;  
    width: 45%; 
}