问题描述
我有一个围绕两个孩子包裹的Div,一个左漂浮在左侧,另一个则右转.我想在孩子们周围放一个边界和背景,但是Div的身高为0,因为它不能调整大小以适合孩子.
这是行动中的一个示例: http://jsfiddle.net/vvz7j/17/17/
我希望红色背景一直向下走.我尝试了高度:自动,但这没用.
所有的帮助将不胜感激.
P.S.如果可能的话,我不想使用任何JavaScript.
推荐答案
这是使用浮子时的常见问题.有几种常见的解决方案,我以个人喜好订购(最佳方法):
-
使用:: CSS伪元素之后.这被称为" clearfix",并起作用IE8及以上.如果您需要与IE的早期版本的兼容性,则此答案应该有所帮助. 示例.
.parentelement::after { content: ""; display: table; clear: both; }
-
使用CSS属性overflow: auto或overflow: hidden将两个浮子添加到一个容器中.但是,此方法可能会导致问题(例如,当工具提示重叠时,将出现卷轴的父元素边缘). 示例.
<div style="overflow: auto"> <div style="float: left"></div> <div style="float: left"></div> </div>
-
向父元素添加设置高度. 示例.
<div style="height: 200px"> <div style="float: left"></div> <div style="float: left"></div> </div>
-
使父元素成为浮点. 示例.
<div style="float: left"> <div style="float: left"></div> <div style="float: left"></div> </div>
-
用clear: both浮动后添加一个div. 示例.
<div style="float: left"></div> <div style="float: left"></div> <div style="clear: both"></div>
其他推荐答案
添加overflow: hidden;到#wrap.这是clear fix.这是一些有关它的文档: http://positioniseverything.net/easyclearing.htmlearing.html
le:您还可以通过多种方法来实现这一目标,具体取决于浏览器的兼容性:
- 添加溢出:隐藏在父容器中.
#wrap { overflow: hidden; }
- 使用伪元素添加clear: both.
#wrap:after { clear: both; content: ""; display: table;}
- 最常用的tehnique是添加额外作为父容器的最后一个元素.
<div style="clear:both"></div>
i preffer not在获得额外的html标记时使用第三个.
其他推荐答案
尝试将overflow: hidden添加到您的#wrap div.