Question

假设我有一个固定宽度为320px的父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

Answer 1

对于容器使用display: table（以及table-layout: fixed，如果您需要等宽列，则为容器的固定宽度; display: table-cell用于子元素。

Answer 2

希望这有帮助！

<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>

Answer 3

某些浏览器还需要规则font-size:0px来显示DIV哪个高度低于1em，否则它们的高度将为1em。

修改

在我写答案时，有更多信息。如果该表布局正常，请回答上面的最后一条评论。考虑到定位，我删除了部分答案，因为我也错过了你的问题。

自动调整子div的大小，使它们平均分享父级的宽度

3 个答案: