Css浮動問題

http://jsfiddle.net/55Ruh/9/。即使我輸入文字，紅框也不會變大。Css浮動問題

<div class="box" style="background: red"> 
    <div class="lefty">Text</div> 
    <div class="righty">Text</div> 
</div>  

.box { 
    background: red; 
    width: 229px; 
    color: white; 
} 

.lefty { 
    float: left; 
} 

.righty { 
    float: right; 
}

來源

2011-04-29 good_evening

如果您希望任何人付出努力來回答問題，您將不得不多加努力地解決您的問題。 – 2011-04-29 22:31:30

也許在兩個浮動div之後添加一個
？你想達到什麼目的？ – 2011-04-29 22:32:36

@Byron Whitlock：恩，我發佈了jsFiddle，我認爲這就夠了，我很抱歉。 – 2011-04-29 22:34:23

http://jsfiddle.net/55Ruh/10/

浮動引起走出文檔流的元素。

父元素：當它只是漂浮內

http://jsfiddle.net/apDU6/

來源

2011-04-29 22:31:50 PeeHaa

omg，它的作品！非常感謝你。 – 2011-04-29 22:32:45

@hey：沒問題。這個問題有幾種解決方案。其中之一是Atul Dravid的評論，但這是最乾淨的。最好的工作之一（我還沒有找到更好的修復:)）。 – PeeHaa 2011-04-29 22:34:31

你可以用一個「交換」分區解決這個問題，一個典型的方法。你需要清除它，擴展它：

<div class="box" style="background: red"> 
    <div class="lefty">Text</div> 
    <div class="righty">Text</div> 
    <div class="clear"/> 
</div>  

.box { 
    background: red; 
    width: 229px; 
    color: white; 
} 

.lefty { 
    float: left; 
} 

.righty { 
    float: right; 
} 

.clear { 
    clear: both; 
}

來源

2011-04-29 22:34:06 Jon

容器collapese：

zoom: 1; /* IE fix */ 
overflow: hidden;

來源

2011-04-29 22:37:41 Aleadam

您可以使用PeeHaa建議的解決方案它的伎倆

但我的經驗，你可以簡單地設置容器元素的飛越自動

它也有訣竅

來源

2011-04-29 23:59:41

「溢出：自動」或「溢出：隱藏」。他們都是這樣做的。但是在某些情況下，你會發現'overflow：auto'會導致滾動條出現。而zoom：1是一個IE修復。 – PeeHaa 2011-04-30 00:46:43

驚人的是正確的，是溢出導致滾動條，所以我用ie6和7邊緣玩耍，使其適合，但這是一個偉大的伎倆，感謝信息 – 2011-04-30 10:47:34

回答

相關問題