Floating Divs +動態高度

想法：我有一個內部有兩個div的容器div，就像頁面上的兩列一樣。Floating Divs +動態高度

問題：我必須使用CSS'float'屬性才能使兩個div顯示爲彼此相鄰，但是當我將float：left或right應用於div時，父div不是浮動，不會拉伸到孩子div的大小，所以背景消失。我知道一個JavaScript技巧來解決這個問題，但是有沒有簡單的，乾淨的CSS解決方案，我錯過了？

來源

2010-07-06 Will

添加「overflow：auto;」給父母應該工作。

添加類似浮動元素後，這一權利的工作原理：

<div class="parent"> 
    <div style='float:left;'></div> 
    <div style='float:right;'></div> 
    <div class='clear'></div> 
</div>

然後，只需添加.clear類你的CSS：

.parent{ 
    overflow:auto; 
} 
.clear{ 
    clear:both; 
}

來源

2010-07-06 15:33:54 Gavrisimo

非常好，作品完美！非常感謝。 – Will 2010-07-06 15:39:11

@請不要忘記將其中一個答案標記爲已接受的答案。 ;） – Gavrisimo 2010-07-06 15:41:08

呵呵，當然！這只是給我一個「請等5分鐘再回答」，因爲你太快了！ – Will 2010-07-06 15:46:22

使用clearfix技術應該可以成功延伸到了你的父元素。

你既可以結算元素添加到父的底部：

HTML

<div id="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="clear"></div> 
</div>

CSS

.clear { clear: both }

或者你可以應用CSS clearfix砍父元素。

CSS

.parent { overflow: auto }

從某種意義上說，這是一個權衡。這感覺更駭人：額外的標記，或CSS只是恰好做你想做的事情？

來源

2010-07-06 15:34:38 Matchu

越少越好，我總是說。 – Will 2010-07-06 15:46:44

使用display：inline-block而不是float。應用於塊元素的嵌入塊使它們以內聯方式顯示。所以，如果你容器具有類容器，你需要使用下面的CSS：

.container div 
{ 
    display:inline-block; 
}

對於IE6和7，你只能使用顯示：內聯，它的行爲方式inline-block的相同。

來源

2010-07-06 15:34:58

一個完全跨瀏覽器兼容的內聯塊可能相當複雜，並且[最終涉及大量的黑客]（http://blog.mozilla.com/webdev/2009/02/20/cross-browser-直列塊/）。雖然內聯塊在某些情況下肯定會更好，但浮點有時實際上可能很遠，更簡單。 – Matchu 2010-07-06 15:38:40

也許你是對的。我並不需要處理IE6＆7等傳統瀏覽器，因此我沒有意識到這種方法會導致一些跨瀏覽器問題。謝謝。 – 2010-07-06 15:46:34

Floating Divs +動態高度

回答

相關問題