自动调整子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的大小，使它们平均分配父宽度

回答

相关问题