自動調整子div的大小，使它們平均分配父寬度

比方說，我有一個固定寬度爲320px的父div，我希望能夠（或者我希望我的用戶能夠）添加任意數量的子div的父母，並讓他們都自動調整，以分享父母的寬度。自動調整子div的大小，使它們平均分配父寬度

我不希望父寬度發生變化，我也不想用任何滾動溢出來做到這一點 - 我只需要內部的div來平均地匹配父級的寬度。

例如，

如果只有一個孩子，則寬度爲100％，如果有兩則其寬度爲50％每個等

我怎麼會去這樣做這個？

我已經用css找到了很多不同的方法，但似乎無法弄清楚。我假設這必須通過某種JavaScript來完成，但我不知道該如何解決。

但是，如果只用css就可以完成，那就太好了。

在此先感謝。

（不知道是不是你需要知道這一點，但孩子的div將沒有文字，他們只是用背景色和一定的高度空白。）

示例代碼：

CSS

.box { 
margin: 10px; 
background: white; 
border-radius: 6px; 
border: 1px solid darken(white, 12%); 
-webkit-box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.07); 
-moz-box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.07); 
box-shadow:   0px 1px 4px rgba(50, 50, 50, 0.07); 
float: left; 
} 

.line { 
height: 6px; 
opacity: 0.4; 
-moz-opacity: 0.4; 
filter:alpha(opacity=4); 
margin-bottom: -1px; 
float: left; 
}

HTML

... 

<div class="box"> 
<div class="line">&nbsp;</div> 
</div> 

... 

#will be able to add any amount of .lines

來源

2012-02-26 ttyelud

請注意，一旦瀏覽器實現[CSS3 flexbox]（http://www.w3.org/TR/css3-flexbox/），這將變得微不足道。 – Neil 2012-02-26 21:59:59

使用display: table（和table-layout: fixed，如果您需要等寬度的列，則爲容器固定寬度），子容器爲display: table-cell。

來源

2012-02-26 21:20:02

這是行之有效的，但它似乎顯示.line作爲表格單元格有一個最小高度（在我的情況下：15px）。我可以添加'height：20px'，它工作正常，但'height：6px'不。 – ttyelud 2012-02-26 21:40:55

請勿將任何字符（特別是' '）放入您的子元素中。那麼高度應該是零。 – 2012-02-26 22:00:59

這很好。 – ttyelud 2012-02-26 22:03:37

希望這會有所幫助！

<html> 
<body> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script tye="text/javascript"> 
function resizeChildren($div){ 
    var $children = $div.children(".child"); // Change .line to the appropriate class of the children 
    var $count = $children.length; // Determine how may children 
    var $width = $div.width(); // Get width of parent 
    var $cellwidth = Math.floor($width/$count); // Calculate appropriate child width 
    $children.width($cellwidth); // Apply width 
} 

function addChild($div, $html){ 
    $($html).prependTo ($div); // Add a new child 
    resizeChildren ($div); // Call the resize function 
} 

$(document).ready(function(){ 
    $("#add").click(function(){ // When <a id="add" is clicked... 
     addChild($(".parent"), '<div class="child">Random...</div>'); 
     return false; 
    }); 
}); 
</script> 

<style type="text/css"> 
.parent { 
    width: 500px; 
    border: 1px solid #000; 
} 

.child { 
    float: left; 
} 
</style> 

<div class="parent" style="width: 500px;"> 
    <div class="child">Random...</div> 
<br clear="all" /></div> 
<a href="#" id="add">Add DIV</a> 

</body> 
</html>

來源

2012-02-26 21:43:09

某些瀏覽器要求也排除font-size:0px顯示DIV其高度低於1EM，否則其高度將是1em的。

編輯

在我寫回答時有更多的信息。如果該表佈局正在工作，則回答上面的最後一條評論。考慮到定位，我刪除了部分答案，因爲我也誤解了你的問題。

來源

2012-02-26 21:45:02 Teemu

自動調整子div的大小，使它們平均分配父寬度

回答

相關問題