自動對齊多個div在另一個不使用表格

是否有可能「自動對齊」這個fiddle的div與width:100%的父母？自動對齊多個div在另一個不使用表格

現在看起來是這樣的：

[#-#-#-#-#-#--------------------]

但它應該是這樣的：

[#-----#-----#-----#-----#-----#]

可以這樣使用CSS來實現？

來源

2013-11-21 sean

你有固定的孩子的數量d ivs還是動態生成？ – NoobEditor

孩子們在小提琴中固定寬度。 – Jannis

http://stackoverflow.com/questions/5351634/css-side-by-side-divs-auto-equal-widths – NoobEditor

是的，你可以，但不幸的是，支持幾乎沒有。 http://www.w3.org/TR/css3-grid-layout/

您可以使用此polyfill使其工作，但我不會指望它。 https://github.com/codler/Grid-Layout-Polyfill

最好的解決辦法是使用表和表單元格：

<div class="table> 
    <div class="cell"> 
     <div class="content"> 
     </div> 
    </div> 
</div>

http://jsfiddle.net/hk754/

來源

2013-11-21 14:38:42 Martin

改變你的CSS這一點，

.row { 
    /*width: 100%;*/ 
    height: 100px; 
    background-color: gray; 
    border: 1px solid black; 
} 

.common { 
    height: 100%; 
    display: inline-block; 
    float: left; 
} 

.one {width: 20%; background-color: #FEC3BF;} 
.two {width: 10%; background-color: #FE7777;} 
.three {width: 25%; background-color: #FE7777;} 
.four {width: 20%; background-color: #FEE826;} 
.five {width: 10%; background-color: #FEBD5B;} 
.six {width: 15%; background-color: #E6FED0;}

http://jsfiddle.net/hk754/8/

來源

2013-11-21 14:59:30

自動對齊多個div在另一個不使用表格

回答

相關問題