我在另一个div中有一个左浮动的div,并且浮动的div内容已经离开了父级。
查看直播:
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 600px;
}
ul li {
border: solid 1px #000;
margin: 15px 0;
}
.img-section {
float: left;
border: solid 1px red;
}
<ul>
<li>
<div class="img-section">
<img src="http://www.placehold.it/50X100">
</div>
Hello world
</li>
<li>
How to avoid the red box getting out of the black one? (and hiding another list element)
</li>
</ul>
我一直在尝试清楚:左/右/两者,但没有任何帮助。
如何避免这种情况?由于图像叠加(我上面的例子中没有包含),我必须浮动整个div(不是内容)
答案 0 :(得分:7)
如果我能正确理解您的问题,您可以通过向ul li
添加overflow:auto
来解决问题。
答案 1 :(得分:3)
我不确定这是否是您所需要的,但您可以为overflow:hidden
添加ul li
这将显示由li
包裹的图片的div。
答案 2 :(得分:3)
浮动元素不会扩展其父级的高度。这会导致您看到的效果。
您必须在最后一个浮动元素后添加一个带有clear: left;
的块级元素:
<li>
<div class="img-section"><img /></div>
<div class="text-section">...</div>
<br style="clear: left;" />
</li>
通常<br>
用于此目的。
答案 3 :(得分:0)
将布局更改为:
<ul>
<li>
<div class="img-section">...</div>
<div class="text-section">...</div>
<br style="clear:left" /> <<---- add this
</li>
etc...
浮动元素后,它会从文档流中稍微移除,并且必须强制父容器延伸超过浮动元素的下限。你可以通过添加额外的行来做到这一点。
答案 4 :(得分:0)
将clear:both
添加到ul li:
ul li {
border: solid 1px #000;
margin: 15px 0;
clear:both;
}