嵌套浮動divs導致外部div不增長

如果任何人都可以建議一個比stackoverflow更好的地方的CSS問題請讓我知道。嵌套浮動divs導致外部div不增長

我有一個外部div與背景和邊框，然後我需要在彩色框內有兩列。某些原因，當我將浮動div放在外部div內時，外部div不會增長。

這裏是我的HTML：

<div class="tip_box"> 
    <h3>Send</h3> 
    <hr /> 
    <form id="email_form"> 

     <div class="three-columns"> 
      <div class="contact_form_input"> 
       <h6>Your Name</h6> 
       <input type="text" name="name_text_box" class="form_input" id="name_text_box" /> 
      </div> 
      <div class="contact_form_input"> 
       <h6>Your Email</h6> 
       <input type="text" name="email_text_box" class="form_input" id="email_text_box" /> 
      </div> 
     </div> 
     <div class="three-columns"> 
      <div class="contact_form_input"> 
       <h6>Recipient Name</h6> 
       <input type="text" name="name_text_box" class="form_input" id="Text1" /> 
      </div> 
      <div class="contact_form_input"> 
       <h6>Recipient Email</h6> 
       <input type="text" name="email_text_box" class="form_input" id="Text2" /> 
      </div> 
     </div> 

    </form> 
</div> 

<p>This is where your message will go. Anything you want, as long as you want. Make it personal; make the recipient know you care.</p>

這裏是我的CSS：

.three-columns { 
    width: 290px; 
    float: left; 
    margin-right: 45px; 
} 
.tip_box { 
    padding: 20px; 
    margin: 20px 0px; 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
    -khtml-border-radius: 10px; 
    border-radius: 7px; 
    padding-left: 55px; 
    background: #eee; 
    font-style:italic; 
    background: #eff7d9 url(../images/icons/tip.png) no-repeat scroll 10px 15px; 
    border: 1px solid #b7db58; 
    color: #5d791b; 
}

截圖：

http://dl.dropbox.com/u/2127038/cssissue.png

來源

2010-11-12 Jeremy H

我愛你如何把圖像清楚地表明你遇到的問題。真的讓它快速簡單地看到你所描述的問題與我正在尋求解決的問題完全一樣。 +1 – 2011-09-25 19:12:39

包含浮動塊的非浮動塊不會自動展開，因爲浮動塊在正常流動之外（或者至少特別在流動之外）被採用。一種解決方法是將overflow屬性指定爲hidden或auto。

.tip-box { overflow: auto; }

有關更多信息，請參見quirksmode。

來源

2010-11-12 04:01:04 theazureshadow

溢出auto會導致滾動條。隱藏是首選。 – 2010-11-12 04:37:28

當然不總是，但提到一件好事。只有當你用某種東西碰到盒子的邊緣時纔會發生（你可以解決這個問題）。你還應該提到'overflow：hidden'有可能切掉像盒子溢出的圖像那樣的內容。 – theazureshadow 2010-11-12 04:38:54

（你可能猜到了，我更喜歡'auto'。;） – theazureshadow 2010-11-12 04:42:05

在這種情況下我也不會浮動的div左，我會讓它們顯示：inline或inline-block。

如果瀏覽器窗口縮小，您的3列將變爲2列，然後是1列。

來源

2010-11-12 03:59:36 tster

-1海報顯然希望塊彼此相鄰排列。浮動是接受的方式來做到這一點。'inline-block'會很有用，但IE6或IE7不支持它，除非你做了一些痛苦的迂迴的黑客攻擊，在這種情況下發生的事情完全是不必要的。「內聯」在任何似乎預期的地方都不會產生效果;可能根本沒有divs。 – theazureshadow 2010-11-12 04:04:31

你將需要什麼是俗稱的clearfix。在這種情況下，包含的元素上overflow: hidden會做 - 看：http://www.jsfiddle.net/yijiang/zuNwH/2

.tip_box { 
    overflow: hidden; 
}

順便說一句，你可能也想用label元素，而不是h6來標記標籤爲您的表單元素，並用一個列表，而不是個人div s包含每個label - input對，並通過依賴更復雜的CSS文件選擇器來減少您使用的class屬性的數量。

<li> 
    <label for="recipient_email">Recipient Email</label> 
    <input type="text" name="email_text_box" id="recipient_email" /> 
</li>

來源

2010-11-12 04:01:07

.tip_box { overflow:hidden; zoom:1; }

這個建立在IE7 +及其他瀏覽器新的塊格式化內容中，在IE6觸發hasLayout的含有浮動

添加下面的HTML後 <div class="tip_box"></div>

來源

2010-11-12 04:03:06

+1對於haslayout的解釋，儘管海報仍然應該看[quirksmode]（http://www.quirksmode.org/css/clearing.html）爲完整的解釋:) – theazureshadow 2010-11-12 04:13:13

：

<div class="clear"></div>

這裏是CSS ：

.clear{ 
clear:both; 
}

它肯定會奏效。

來源

2010-11-12 07:01:18 Hem

嵌套浮動divs導致外部div不增長

回答

相關問題