css - Css、child-divs 和浮动

Question

我厌倦了使用这些类型的 div :(。

我有 2 个 div：

<div id="content">
  <div id="row_left"></div>
  <div id="row_middle"></div>
  <div id="row_right"></div>
</div>
<div id="bottom"></div>

CSS：

#content {
  overflow: hidden; width: 100%;
}

Content-div 包括另外 3 个 div，它们应该保持水平。

#row_left, #row_middle, #row_rifht { float: left; width: 33%; }

问题是底部 div 不会一直引用内容文本。它总是在同一个位置，即使内容行文本结束。我该如何修复它？

score 2 · Accepted Answer

2

尝试

...
<div id="bottom" style='clear:both'></div>

于 2009-09-12T10:38:48.737 回答

score 1 · Accepted Answer

尝试在具有以下样式的内容后添加一个 div：

clear: both; line-height: 0.1em;

并放一个

在里面

score 1 · Accepted Answer

如果您想在不添加额外标记的情况下清除浮动，请将其放在您的 CSS 中：

#content { zoom: 1; }
#content:after {
    clear: both;
    display: block;
    content: ".";
    height: 0;
    visibility: hidden;
}

3 回答 3