Q

並排div

css
html

2010-01-19 67 views 10 likes

10

我有一個父div的4個div。爲了讓它們並排出現，我給了所有4個div一個float：left的樣式。 div並排顯示，但父div的高度不會增長到包含子div的高度。我錯過了什麼？並排div

2010-01-19 Jeremy

A

回答

2

4個div後，您需要「取消」浮動樣式。這是通過創建p完成的，例如：<p style="clear: both"></p> 您的父div將自動獲得正確的大小。

2010-01-19 18:08:51 Isabelle

+0

顯然你的意思'明確：both' – 2010-01-19 18:15:51

+2

這不是大多數Web推薦的解決方案開發人員，因爲它需要額外的空白標記來破壞文檔。 – zombat 2010-01-19 18:41:15

+2

同意。這是垃圾。請參閱[這裏]（http://nicolas.google.com/micro-clearfix-hack/）瞭解更好的方法。 – 2012-12-04 12:19:24

0

我認爲你應該給父母div 100％的高度不固定，以便它包含子div的高度，如果它們增長的話。

2010-01-19 18:07:57 Sarfraz

3

在父div上設置overflow: hidden;。

說明：浮動元素將它們從常規文檔流中移除。因此，如果一個給定的元素只包含浮動元素，它將不會有任何高度（或者擴展寬度 - 除非它具有默認的塊元素的隱式寬度）。

將overflow屬性設置爲hidden將告訴父元素尊重其子元素的寬度，但隱藏所有超出其寬度和高度的元素。

當然，另一種選擇是在浮動的div後面添加一個元素在父級內，使用clear: both;這使最後一個元素位於常規文檔流內的所有浮動元素之後。由於它位於父項內部，父項的高度是浮動項目的高度，以及常規填充和已清除項目的高度。

2010-01-19 18:08:01 davethegr8

8

這是浮點元素實現的一個怪癖原因，當您有一個只包含浮動子元素的父元素時，會發生這種情況。有兩種方法可以解決它。一種是將父元素的overflow屬性設置爲hidden，有時稱爲溢出方法。另一個被稱爲clearfix method，並且涉及使用僞類的:after。

clearfix方法的優點是允許特定位置的元素在父容器外面「掛起」，如果您需要它們，則會犧牲一些額外的CSS和標記。這是我喜歡的方法，因爲我經常使用懸掛元素。

2010-01-19 18:11:30 zombat

1

Millinet公司的回答會工作，或者你可以浮在父DIV這也將允許它擴展到包含其內容

2010-01-19 18:14:05 Ray

0

我推薦clearfix方法爲好。發生此問題是因爲浮動元素將刪除它通常包含的任何高度。

PositionIsEverything posts a complete explanation以及IE6的相應解決方案，因爲：舊選擇器之後不支持僞選擇器。

2010-01-19 18:56:59 neatlysliced

0

如果你想的div是並排的一面，你可以嘗試使用inline-block的：

<style> 
    .alldivs { 
     display: inline-block; 
    } 
</style> 

<div id="wrapper"> 
    <div id="div1" class="alldivs"></div> 
    <div id="div2" class="alldivs"></div> 
    <div id="div3" class="alldivs"></div> 
    <div id="div4" class="alldivs"></div> 
</div>

2012-12-04 12:09:55

相關問題