css - 浮动内容会破坏页面上的其他浮动内容

Question

我正在处理此页面上的“关于我们”标题

基本上，带有图像和蓝色“关于我们”块的小 div 是图像，但出于 SEO 目的，我现在将其替换为可以使用<h1>...</h1>标签的结构。

如您所见，图像和标题标签的布局完美无缺，但它被推到了页面的右列内容下方。

我已经检查过，并仔细检查过，看起来所有的浮点数都被正确包含（除非我错过了什么）所以我不知道如何解决这个问题。

谁能告诉我我在这里做错了什么？

的HTML：

<div class="page_header">
    <div>
        <img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-1.jpg">
        <img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-2.jpg" alt="" />
        <img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-3.jpg" alt="" />
        <h1>About Us</h1>
    </div>
</div>

CSS：

/* Page Headers
----------------------------*/
.page_header div {
   overflow: hidden;
    min-width: 665px;
}

.page_header img, .page_header h1 {
 float: left;
 margin: 10px 10px 0 0;        
}

.page_header img:nth-child(2) {
    clear:right;
}

.page_header h1.about-us {
 line-height: 90px;
 background: #00f;
 color: #fff;
 padding: 0 42px;
}

提前致谢！

Answer 1

那是因为您<div id="sidebar-parimary">应该驻留在<div id="main">元素内。

目前是：

  <div id="main">
    <div id="content">...</div>
  </div>

  <div id="sidebar-primary">..</div>

它应该是：

  <div id="main">
    <div id="content">...</div>
    <div id="sidebar-primary">..</div>
  </div>

Answer 2

嘿 Ortund 实际上以不恰当的方式编写了一个 HTML 标记，所以你应该这样写：-

<div id="main">
<div id="content">
<div id="sidebar-primary">
</div>

通过此方法查看附件图像其工作正常：-