Html 如何根据子DIV中的内容自动调整父DIV高度?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/10101841/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to auto adjust parent DIV height according to the contents in child DIV?
提问by Sumit Dobriyal
I have one parent DIV inside parent DIV i have two DIV one in left and second is in right side inside the parent DIV i want when i write any content in left or right div tag the parent DIV will be auto adjusted according to the height of left or right DIV tags..
我在父 DIV 中有一个父 DIV 我有两个 DIV,一个在左侧,第二个在父 DIV 的右侧,当我在左侧或右侧 div 标签中写入任何内容时,父 DIV 将根据高度自动调整左或右 DIV 标签..
How to write the .css file to perform this ?
如何编写 .css 文件来执行此操作?
the main DIV will not be adjusted according to the child div in Design View :
主 DIV 不会根据设计视图中的子 div 进行调整:
review my code please :
请查看我的代码:
<div style="padding: 8px; overflow: hidden; background-color: #FFFFFF;">
<div style ="float:left">
<p>Hi, Flo!</p>
</div>
<div style ="float:right; height: 180px;">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
回答by Ian Wood
if the two child divs are floats then you could use:
如果两个子 div 是浮点数,那么您可以使用:
div.parent{ overflow: hidden; }
with NO height specified.
没有指定高度。
回答by C-man
div.parent{
display: inline-block;
width: 100%;
}
I found this to be a very nice solution. If you had floating children and non floating children, the height will automatically be adjusted to the min amount of space needed. The width is set to 100% to expand to the parent of the parent's width.
我发现这是一个非常好的解决方案。如果您有漂浮的孩子和非漂浮的孩子,高度将自动调整到所需的最小空间量。宽度设置为 100% 以扩展到父级宽度的父级。
回答by Gatekeeper
Div size is automatically adjusted by content it holds, unles you specify some floats to inner divs.. If you have floating divs, you can use this solution: similar question
div 大小由它所包含的内容自动调整,除非您指定一些浮动到内部 div。如果您有浮动 div,则可以使用此解决方案:类似问题