浮點問題 - Css

我想創建一個可變高度的div。看起來，如果div的可變高度div內部設置爲float:left可變高度div得到0的高度。如果我設置變量高度div float:left div隨其中的內容增長，但現在可變高度div被髮送到屏幕左側而不是中心。如何讓主div保持在中心位置，但是它還會隨着它的子div的增長而增長？浮點問題 - Css

來源

2011-06-14 Lumpy

到目前爲止，你有什麼代碼明智嗎？ – ngen 2011-06-14 16:31:47

溢出：隱藏在父div上就夠了 – lipelip 2011-06-14 16:33:51

添加overflow: auto;到主DIV將保持它爲中心，同時也將迫使它來包裝它裏面的元素周圍。對浮動屬性overflow屬性兩個偉大的文章可以在這裏找到：http://css-tricks.com/all-about-floats//http://css-tricks.com/the-css-overflow-property/

我不會建議使用<div style="clear: both;">技術，因爲它是不必要的額外的標記，並且不會對演示文稿添加任何東西。

來源

2011-06-14 17:04:06 Wex

<div id="VariableHeightDiv"> 
    <div class="child floatLeft"></div> 
    <div class="child floatLeft"></div> 
    <div class="child floatLeft"></div> 

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

，並在你的CSS .clear {明確：既;}

你需要清除浮動，否則瀏覽器無法正確理解和計算容器div的高度。這就是爲什麼最後我們添加一個清空的div：兩者都是。

來源

2011-06-14 16:32:06 Pantelis

這正是我所需要的，謝謝！ – Lumpy 2011-06-14 16:37:33

但創建一個額外的元素是多餘的。 – Sotiris 2011-06-14 16:49:25

在某些情況下，這可能是多餘的。但是，如果你沒有指定寬度的元素，那麼它不會在IE6上工作。有時必須指定一個寬度值，或者甚至將溢出設置爲隱藏（這是爲了其他更明顯的用途） - 可能會混淆現有的佈局，並最終導致更大的麻煩。 – Pantelis 2011-06-14 17:06:47

浮動divs從文檔的「流」中被刪除。可以強制div容器完全包圍它的內容，即使他們是浮動的，後來通過使用清除元件：

<div> 
    <div style="float: left">blah blah</div> 
    <br style="clear: both" /> 
</div>

有更好的方法的詳細here。

來源

2011-06-14 16:33:01

對於主DIV，包括這些CSS規則：

margin: 0 auto; 
overflow: auto;

還要確保你有一個主要的div一個min-height和width屬性集。

編輯：我也包括溢出屬性。

來源

2011-06-14 16:34:38 itsols

add overflow:hidden or overflow:scroll or overflow:auto for the parent div。

例如：http://jsfiddle.net/MbgH4/1

來源

2011-06-14 16:36:23 Sotiris

浮點問題 - Css

回答

相關問題