gpt4 book ai didi

html - 外部div的高度不随内部div扩展

转载 作者:技术小花猫 更新时间:2023-10-29 12:05:41 26 4
gpt4 key购买 nike

我有一个宽度为 100% 的 bodyMain div。它里面是一个 body div 800px,带有自动边距(我可以使用'body'作为id吗?)。这里面有两个 div bodyLeft 和 bodyRight 分别为 200px 和 600px 宽。当我向内部 div 添加内容时, bodyMain 和 body 的高度都不会扩展。所有高度都是自动的。

这是代码:http://jsfiddle.net/TqxHq/18/

HTML:

<body>
<div id="bodyMain">
<div id="body">
<div id="bodyLeft"> left text goes here<br />
</div>
<div id="bodyRight">Right text goes here
</div>
</div>
</div>
</body>

CSS:

#bodyMain{
border:1px solid red;
width:100%;
height:auto;

}
#body{
border:1px solid green;
width:804px;
height:auto;
margin:auto;
}
#bodyLeft{
border:1px solid blue;
float:left;
width:200PX;
height:auto;
}
#bodyRight{
border:1px solid orange;
float:right;
width:600PX;
height:auto;
}

最佳答案

你必须添加

<div style="clear:both;"></div> 

在 float div 的末尾修复了这个问题。看 here

当 float 元素位于容器框内并且元素不会自动强制容器的高度调整为 float 元素时,就会出现问题。当一个元素 float 时,它的父元素不再包含它,因为 float 元素已从流中移除。您可以使用 2 种方法来修复它:

clear:both
clearfix

关于html - 外部div的高度不随内部div扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10154950/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com