事業部在內容包裝的一切，在它外面

這是不可思議！我不知道它爲什麼這樣做，但div .content-wrap，或.main-content是包裝元素是在格外.......事業部在內容包裝的一切，在它外面

它使用螢火蟲的屏幕截圖。 alt text

但.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;}

我該如何解決這個問題？

來源

2010-10-11 omnix

是HTML有效？ – 2010-10-11 14:33:36

你需要「清花車」，所以plans-wrap元素實際上會附上裏面的三個浮點元素。否則，浮標被取出正常流量，plans-wrap具有零高度，下一格（main-content）與浮標重疊。這應有助於：

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

More info

來源

2010-10-11 14:37:00

是的，我補充說，但什麼都沒有改變。 – omnix 2010-10-11 14:42:26

其實它的工作，謝謝。 – omnix 2010-10-11 16:34:46

您#plans-wrap沒有任何規定高度。嘗試將overflow:auto添加到其CSS。

來源

2010-10-11 14:36:57

這工作！謝謝。 – omnix 2010-10-11 14:43:17

在Chrome那裏有一個滾動條：/ http://imgur.com/vhIep.png – omnix 2010-10-11 15:08:37

你也可以清晰花車與the clearfix method。

你需要一個類「clearfix」添加到您的。主要內容，然後將以下你的CSS：

.clearfix:after { 
visibility: hidden; 
display: block; 
font-size: 0; 
content: " "; 
clear: both; 
height: 0; 
} 
.clearfix { display: inline-table; } 
/* Hides from IE-mac \*/ 
* html .clearfix { height: 1%; } 
.clearfix { display: block; } 
/* End hide from IE-mac */

這種方法基本上是採用僞類追加父容器，以浮動具有空格字符的元素將導致父級也包含所有浮動元素。

*注：另外，要確保你有適當的一切關閉。據*

來源

2010-10-11 17:23:11

謝謝我稍後會使用它。 – omnix 2010-10-12 05:03:01

事業部在內容包裝的一切，在它外面

回答

相關問題