爲什麼float div在下一個div內浮動？

我希望我是不是用CSS初學者，但我不明白爲什麼會發生以下情況...爲什麼float div在下一個div內浮動？

你可以看到一個例子here

我希望顯示在2個獨立的DIV同一「行」：

第一個div必須100％的寬度與第二
第二個div在第一

的極值右

所以，我已經做了以下

// CSS 
.div2 { 
    background:#EDEDED; 
    float:right;  
} 
.div1 {  
    background:#CCC; 
} 
.div1, .div2 { 
    padding:4px; 
    margin:4px; 
} 
.round { 
    -webkit-border-radius:8px; 
    -moz-border-radius:8px; 
    border-radius:8px; 
    border:1px solid #000; 
} 
// HTML 
<div class="div2 round">Test 2</div> 
<div class="div1 round">Test 1</div>

但.div2是第一個div裏面...... Bad display

如何顯示類似以下？（就像我認爲應該把它顯示...） Good display

任何幫助表示讚賞...

編輯：解 通過user570783

.div1 {overflow:hidden;}

工作就像一個魅力，但不真正記錄，爲什麼這有效？

來源

2012-05-06 Valky

Add overflow：hidden;到div1風格。 http://stackoverflow.com/questions/2198116/xhtml-css-how-to-make-inner-div-get-100-width-minus-another-div-width – user570783

@ user570783完美答案！非常感謝。寫在一個答案，然後我可以接受它。 – Valky

我發佈了一個答案，但因爲太短而變成了評論。無論如何，在答案中包含這種行爲在css標準中記錄的位置是很有用的。我真的不明白爲什麼會這樣。 – user570783

浮動做什麼說。浮動。因爲東西可以在它下面。文本將被打包，但邊框不會

如果您知道「測試2」的寬度，則可以添加「margin-right：x;」

來源

2012-05-06 23:39:31

謝謝你的回答，但我不知道在撰寫本文時div1或div2的寬度爲 – Valky

好的，這裏有很多解決方案涉及到浮點數，內聯塊，邊距和邊界，但都需要知道至少一個元素的大小。

但是！

你可以在這裏做一個技巧。如果在第一個div中添加'overflow：hidden'，它會強制div到'block formatting context'

這將得到您所追求的結果，並帶有動態大小的右浮動元素。

爲了使這個工作在IE5和6中，你需要在第一個元素上觸發'hasLayout'，所以position：relative;

fiddle

來源

2012-05-07 00:45:42

，我沒有看到別人在評論中回答了它！ gj user570783 –

無論如何感謝您的回答+1 – Valky

爲什麼float div在下一個div內浮動？

回答

相關問題