CSS中父元素高度沒有隨子元素高度的改變而改變，應(yīng)該如何解決？
CSS中父元素高度沒有隨子元素高度的改變而改變，應(yīng)該如何解決？
<body>
?<div id="header">...</div>
? ?<div id="main">
? ? ? ? ? ?<div id="left" class="fleft">...</div>
? ? ? ? ? ?<div id="middle" class="fleft">
? ? ? ? ? ? ? ? ? ?<div id="mtop">...</div>
? ? ? ? ? ? ? ? ? ?<div id="mview"><!---->
? ? ? ? ? ? ? ? ? ? ? ? ? ?<div class="box"></div>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<div class="box"></div>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<div class="box"></div>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<div class="box" style="position:absolute;top: ... ;left: ... ;"></div>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<div class="box" style="position:absolute;top: ... ;left: ... ;"></div>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<div class="box" style="position:absolute;top: ... ;left: ... ;"></div>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<div class="box" style="position:absolute;top: ... ;left: ... ;"></div>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<div class="box" style="position:absolute;top: ... ;left: ... ;"></div>
? ? ? ? ? ? ? ? ? ? ? ? ? ?<div class="box" style="position:absolute;top: ... ;left: ... ;"></div>
? ? ? ? ? ? ? ? ? ? ? ? ? ?......
? ? ? ? ? ? ? ? ? ? ? ? ? ?.....
? ? ? ? ? ? ? ? ? ? ? ? ? ?....
? ? ? ? ? ? ? ? ? ? ? ? ? ?...
? ? ? ? ? ? ? ? ? ? ? ? ? ?<div class="box" style="position:absolute;top: ... ;left: ... ;"></div>
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ?</div>
? ? ? ? ? ?<div id="right">...</div>
? ?</div>
? ?<div id="footer">...</div>
</body>
<!--
box的style由jquery添加的；
#main { width:960px;overflow: hidden; margin:0 auto;background:url(imgs/bg_content.png) repeat-y right; }
#middle {width: 560px;padding: 20px;position: relative;overflow: hidden;}
#mview {position: relative; overflow: hidden;}
.box {padding: 10px 0 0 10px;float: left;}
.fleft{float:left;}
-->
我想在mview里面做一個局部的瀑布流效果，讓每個box瀑布一樣的布局?，F(xiàn)在jquery也寫好了，mview卻只顯示的一小部分（就第一行的高度那么高），其他的顯示不出來，我在網(wǎng)上查了查，沒有找到解決辦法。誠請達人指點指點。謝謝
2016-11-18
父元素不要設(shè)置固定高度，隨子元素去撐開父元素高度，如果撐不開，那就是子元素有浮動沒有清除
2015-06-11
我也遇到這個問題了，因為里每一個元素的高度都是變化的，我也是只顯示第一張圖片一個高度的區(qū)域
解決辦法：給外面的容易定義高度，，但是就不是瀑布流了
2015-03-20
是不是要清除下浮動
2014-12-16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
? ?.parent{
? ? width: 200px;
? ? height: auto;
? ? border: 1px solid red;
? ?}
.child1{
height: 100px;
width: 100px;
border: 1px solid green;
}
.child2{
height: 150px;
width: 150px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="parent">
? <div class="child1"></div>
? <div class="child2"></div>
</div>
</body>
</html>
-----------------------------------------------------
運行上面的代碼，出現(xiàn)如下，是你要的效果嗎？