我正试图将padding: 16px 0;
放在彼此左边漂浮的3个div上,但我在如何操作方面遇到了困难。
示例: http://codepen.io/anon/pen/ifpAs
border-bottom: medium double red;
应该比第一部分小部件低16px。
为什么这不起作用,是否有办法在不针对特定div ID的情况下执行此操作,例如#search,#logo,#social等,因为稍后可能会放置更多小部件?
谢谢。
答案 0 :(得分:3)
#section-one:after {
content: "";
clear: both;
display: block;
}
答案 1 :(得分:2)
http://codepen.io/anon/pen/eqJBg
由于所有三个内部div都是浮动的,因此它们将从布局中移除,而容器div只能获得16个像素的高度。在那里添加一个清晰使它如此工作,就像你期望的那样。类似于许多重置样式表实现的clearfix。
[编辑因为我们不喜欢纯链接答案]
HTML
<div id="section-one">
...
<div class="clr"></div>
</div> <!--end #section-one-->
CSS
.clr {
clear:both;
}