添加CSS填充/边距到Divs

时间:2013-03-06 22:28:43

标签: html css html5 css3 css-float

我正试图将padding: 16px 0;放在彼此左边漂浮的3个div上,但我在如何操作方面遇到了困难。

示例: http://codepen.io/anon/pen/ifpAs

border-bottom: medium double red;应该比第一部分小部件低16px。

为什么这不起作用,是否有办法在不针对特定div ID的情况下执行此操作,例如#search,#logo,#social等,因为稍后可能会放置更多小部件?

谢谢。

2 个答案:

答案 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; 
}