2

我有一个明确的浮动问题，我无法弄清楚。这是 HTML 代码： 

 <div id="main">
   <div id="primary">
      <div id="content" role="main">
      </div><!-- #content -->
   </div><!-- #primary -->
   <div id="secondary">
   <div><!-- #secondary -->
 </div><!-- #main -->

这是每个元素的 CSS：

#main {
clear: both;
}

#primary {
float: left;
width: 100%;
margin: 0 -40% 0 0!important;
}

#content {
background: none repeat scroll 0 0 white;
box-shadow: 0px 10px 10px 2px #888;
float: left;
margin: 0 12.3%!important;
position: relative;
width: auto;
 }

#secondary {
float: right;
margin-right: 15%;
width: 22%;
position: relative;
padding-top: 170px;
}

该网站建立在 wordpress 之上，因此main以 header.php 开始，以 footer.php 结束。primary和contentdiv 在每个页面模板中开始和结束，并且在div结束secondary后在每个页面模板（获取侧边栏）中调用primarydiv。

问题是内容 div 在主 div 结束后立即停止，而辅助 div 继续向下延伸。内容 div 应延伸到辅助或主要 div 结束的文档末尾。

您可以在此网站上实时查看代码及其引起的问题。

4

4 回答 4

1

它是因为float

给overflow property你的父母。

或创建一个额外的 div 并给clear:both

在使用基于浮动的布局进行编码时，我们面临的一个常见问题是包装容器不会扩展到子浮动元素的高度。解决此问题的典型解决方案是clear float在浮动元素之后添加一个元素或添加一个clearfix到包装器。但是你也可以使用溢出属性来解决这个问题。这也不是一个新的 CSS 技巧。它在很久以前就被记录在案了。

于 2012-08-02T12:10:25.087 回答
0

父元素永远不会扩展以包含浮动元素。要使该元素扩展以包含它们，您可以添加overflow: auto到父元素，以便在大多数情况下包含溢出该元素的浮动元素。我找不到一个元素来应用它，所以你可能做了其他事情来导致这个。position:absolute 具有相同的问题，即从正常流程中取出并且父元素将不包含它们。

于 2012-08-02T12:05:46.280 回答
0

css 中的clear属性需要应用于div代码中的新属性。它通过在父元素中的所有浮动元素下方启动 div 来工作。它看起来像这样：

<div id="main">
  <div id="primary">
    <div id="content" role="main">
    </div>
  </div>
  <div id="secondary">
  <div>
  <div style="clear: both"></div> <!-- Don't do inline styles -->
</div>

那应该这样做。您还应该取出clear: bothon #main'sCSS。这不是必需的。

于 2012-08-02T12:09:36.837 回答
0

我认为问题在于“次要”元素不包含在您网站上的“内容”元素中，因此显然“内容”不会增长以适应“次要”。

您需要重新考虑您的 html 结构。

于 2012-08-02T12:10:53.693 回答