html - Div 将内容中的所有内容都包装起来

Question

这很奇怪!我不确定为什么要这样做，但是 div .content-wrap 或 .main-content 正在包装 div 之外的元素.... ...

使用 Firebug 的屏幕截图。

但是 .main-content 不应该包装 3 列...

这是两者的 HTML。

<div id="plans-wrap">
    <section class="starter">
     <img class="icon-1" src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon">
      <h2>Starter Plan</h2>
      <ul>
        <li><span>5GB Disk Space</span></li>
        <li><span>Unmetered Bandwidth</span></li>
        <li><span>Unlimited Add-on Domains</span></li>
        <li><span>Unlimited Subdomains</span></li>
        <li><span>Unlimited Email/FTP Accounts</span></li>
        <li><span>Unlimited MySQL Databases</span></li>
        <li><span>Shell access upon request</span></li>
      </ul>
      <img src="images/starterplan.png" width="192" height="51" alt="Starter Plan">
    </section><!-- //.starter -->

    <section class="inter">
      <img class="icon-2" src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon">
      <h2>Intermediate Plan</h2>
      <ul>
        <li><span>10GB Disk Space</span></li>
        <li><span>Unmetered Bandwidth</span></li>
        <li><span>Unlimited Add-on Domains</span></li>
        <li><span>Unlimited Subdomains</span></li>
        <li><span>Unlimited Email/FTP Accounts</span></li>
        <li><span>Unlimited MySQL Databases</span></li>
        <li><span>Shell access upon request</span></li>
      </ul>
      <img src="images/interplan.png" width="192" height="51" alt="Intermeidate Plan">
    </section><!-- //.intermediate -->

    <section class="advance">
      <img class="icon-3" src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon">
      <h2>Advance Plan</h2>
      <ul>
        <li><span>Unmetered Disk Space</span></li>
        <li><span>Unmetered Bandwidth</span></li>
        <li><span>Unlimited Add-on Domains</span></li>
        <li><span>Unlimited Subdomains</span></li>
        <li><span>Unlimited Email/FTP Accounts</span></li>
        <li><span>Unlimited MySQL Databases</span></li>
        <li><span>Shell access upon request</span></li>
      </ul>
      <img src="images/advplan.png" width="192" height="51" alt="Starter Plan">
    </section><!-- //.advance -->
  </div><!-- //#plans-wrap -->
    <div class="content-wrap">
      <aside class="badges">
        <img src="images/sidebar-stickers.png" width="150" height="634" alt="Sidebar Stickers">
      </aside><!-- //.badges -->

      <div class="main-content">
        <!-- All Content For Each Page Goes Here -->
        <!-- index/home -->

        <img src="images/hosting-header.png" width="458" height="179" alt="Hosting Header">
        <article>
          <h1> Welcome to Elektrik Host! </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales nisi eu sem dapibus imperdiet.
            Etiam venenatis elit nec sapien commodo dapibus. Donec vel enim nec augue fringilla pharetra. Pellentesque
            sed augue est. Nullam et erat sed leo vestibulum consequat sit amet at ligula. 
          </p>
        </article><!-- //article -->  
      </div><!-- //.main-content -->
    </div><!-- //#content-wrap --> 

和CSS:

/* -- PRICE PLANS -- */
#plans-wrap { margin: 0 0 0 5px; width: 100%; }
#plans-wrap section { background: #1b1b1b; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; float: left; margin: 19px 10px 0 0; }
#plans-wrap section img.icon-1, #plans-wrap section img.icon-2, #plans-wrap section img.icon-3  {  float: right; }
#plans-wrap section h2 { background: url(../images/plan-header-bg.png) repeat-x; display: block; border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; font-size: 15px; padding: 18px 18px 32px 6px; width: 188px; }
#plans-wrap section h2:before { content: "» "; }
#plans-wrap ul { padding: 0px 23px 23px 23px ; }
#plans-wrap ul li { color: #b60000; font-size: 12px; margin: 9px 0 0 0; }
#plans-wrap ul li span { color: #b6b6b6; }

/* -- CONTENT WRAP -- */
#content-wrap { margin: 12px auto; width: auto; }
#content-wrap .badges { float: right;} 

我该如何解决这个问题？

Answer 1

您需要“清除 float ”，因此 plans-wrap 元素实际上会在其中包含三个 float 元素。否则， float 从正常流中取出，plans-wrap 的高度为零，下一个 div (main-content) 与 float 重叠。这应该有所帮助:

#plans-wrap {
    overflow:hidden;
    zoom:1;
}

More info