Javascript 自动调整子div的大小，使它们平均共享父div的宽度_Javascript_Css_Html_Resize

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

javascript css html

Javascript 自动调整子div的大小，使它们平均共享父div的宽度,javascript,css,html,resize,Javascript,Css,Html,Resize,假设我有一个固定宽度为320px的父div，我希望能够（或者我希望我的用户能够）向父div添加任意数量的子div，并让它们自动调整以共享父div的宽度我不想更改父级宽度，也不想使用任何类型的滚动溢出来执行此操作-我只需要内部的div与父级的宽度相等比如说, 如果只有一个孩子，则宽度为100%，如果有两个孩子，则每个孩子的宽度为50%，以此类推我该怎么做呢我用css处理了很多不同的方法，但似乎无法理解。我假设这必须通过某种javascript来完成，但我知道的还不够多，无法实现但是，

假设我有一个固定宽度为320px的父div，我希望能够（或者我希望我的用户能够）向父div添加任意数量的子div，并让它们自动调整以共享父div的宽度

我不想更改父级宽度，也不想使用任何类型的滚动溢出来执行此操作-我只需要内部的div与父级的宽度相等

比如说,

如果只有一个孩子，则宽度为100%，如果有两个孩子，则每个孩子的宽度为50%，以此类推

我该怎么做呢

我用css处理了很多不同的方法，但似乎无法理解。我假设这必须通过某种javascript来完成，但我知道的还不够多，无法实现

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

提前谢谢

（不知道您是否需要知道这一点，但子div将没有文本。它们只是带有背景色和固定高度的空白）

示例代码：

CSS

HTML

。。。
...
#将能够添加任意数量的.行

使用

显示：表格

（和

表格布局：固定

，如果需要等宽列，则容器的宽度固定），子元素使用

显示：表格单元格

。

使用

显示：表格

（和

table layout:fixed

，如果需要等宽列，则容器的宽度固定）和

display:table cell

子元素。

希望这有帮助

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


函数大小调整子对象（$div）{
var$children=$div.children（“.child”）；//将.line更改为相应的子类
var$count=$children.length；//确定如何
var$width=$div.width（）；//获取父项的宽度
var$cellwidth=Math.floor（$width/$count）；//计算适当的子宽度
$children.width（$cellwidth）；//应用宽度
}
函数addChild（$div，$html）{
$（$html）.prependTo（$div）；//添加新子级
resizeChildren（$div）；//调用resize函数
}
$（文档）.ready（函数（）{
$（“#添加”）。单击（函数（）{//

希望这有帮助

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


函数大小调整子对象（$div）{
var$children=$div.children（“.child”）；//将.line更改为相应的子类
var$count=$children.length；//确定如何
var$width=$div.width（）；//获取父项的宽度
var$cellwidth=Math.floor（$width/$count）；//计算适当的子宽度
$children.width（$cellwidth）；//应用宽度
}
函数addChild（$div，$html）{
$（$html）.prependTo（$div）；//添加新子级
resizeChildren（$div）；//调用resize函数
}
$（文档）.ready（函数（）{
$（“#添加”）。单击（函数（）{//

一些浏览器还需要rule

字体大小：0px

来显示

DIV

哪个高度低于1m，否则它们的高度将为1m

编辑

在我写答案的过程中，我得到了更多的信息。如果表格布局正常，最后一条评论的答案就在上面。我删除了答案中考虑定位的部分，因为我也误解了你的问题。

一些浏览器还需要rule

font size:0px

来显示

DIV

的高度低于1米，否则，其高度将为1米

编辑

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

这很有效，但在将.line显示为表格单元格时，似乎有一个最小高度（在我的例子中：15px）。我可以添加

height:20px

，它可以正常工作，但是

height:6px

不能。不要在子元素中添加任何字符（

），那么height应该为零。这很好，但在将.line显示为表格单元格时，似乎有一个最小高度（在我的例子中：15px）。我可以添加

height:20px

，它可以正常工作，但

height:6px

不能。不要在子元素中添加任何字符（

），那么height应该为零。请注意，一旦浏览器实现，这将变得微不足道。请注意，一旦浏览器实现，这将变得微不足道。

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