請看看我的代碼:http://jsfiddle.net/XptrZ/ 爲什麼不是紅色內部的藍色div,以及爲什麼紅色的div具有height = 0。 我該如何解決這個問題? 由於父div中的子div,float:left
4
A
回答
12
添加overflow: hidden
到父
.parent {
background-color: gold;
border: 1px solid gold;
position: relative;
overflow: hidden
}
.child {
float: left;
width: 100px;
height: 100px;
display: block;
margin: 10px;
background-color: pink;
border: 1px solid #999;
}
<div class="parent">
<div class="child">div1</div>
<div class="child">div2</div>
<div class="child">div3</div>
</div>
1
添加顯示:表;裏面的父母。這會工作。
+0
IE7及以下版本不支持'display:table' - http://www.quirksmode.org/css/display.html「Below」 - 這可能不是一個大問題,但您仍然需要考慮IE7 – 2012-01-17 18:21:17
+0
感謝信息。 – srijan 2012-01-17 18:43:52
1
添加一個額外的空div來父div使用該格式:
<div style="clear:both"></div>
相關問題
- 1. DIV float:left; TROUBLE
- 2. JQuery使用動態創建的子div時 - float:left丟失子div
- 3. 父母div中的中心子div
- 4. 如何停止float:left div被div覆蓋?
- 5. 居中根據父div的子div
- 6. 從jquery中的父div刪除子div
- 7. 子div影響父div?
- 8. 子div延伸出父div
- 9. 子div將填寫父div
- 10. CSS父子div
- 11. 當父div被切換時,隱藏子div的子div div/slideDown
- 12. 居中移動版本中的div(float:left;)
- 13. 在父div的div div由div jquery中的父div class
- 14. 關於父div的溢出子div不可見的除父div
- 15. 根據子div調整父div div
- 16. 動態HTML DIV,超過float:left;
- 17. style div div div的父div
- 18. 父div的邊界阻塞子div
- 19. 子div旁邊的父div,在底部
- 20. 子div覆蓋父div的寬度
- 21. 從子div獲得父div的索引
- 22. 父DIV顯示孩子的div
- 23. 給孩子的div相對於父DIV
- 24. 父div的滾動條覆蓋子div
- 25. 空父DIV而不是孩子的div
- 26. 保持孩子div內的父div
- 27. 對齊子div對父div的基線
- 28. 子div不自己對齊父div中的另一個div
- 29. 居中父母Div內的兩個子Div Div
- 30. 讓父div div懸停的子div div動畫
謝謝佐爾坦。它完美的作品。你能給我一個解決方案的簡短解釋嗎?我想明白這一點。謝謝 – 2012-01-17 18:29:15
由浮標取出正常文檔流程所導致的問題。另一側的「overflow:hidden」建立了一個新的塊格式化上下文(http://www.w3.org/TR/CSS21/visuren.html#block-formatting),並且再次成爲浮動元素的父元素。 – 2012-01-17 19:06:33