CSS中父元素高度没有随子元素高度的改变而改变，应该如何解决？
09949
2014-12-16 01:38
CSS中父元素高度没有随子元素高度的改变而改变，应该如何解决？
<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瀑布一样的布局。现在jquery也写好了，mview却只显示的一小部分（就第一行的高度那么高），其他的显示不出来，我在网上查了查，没有找到解决办法。诚请达人指点指点。谢谢
4回答
-
- 似鹿
- 2016-11-18 16:33:20
父元素不要设置固定高度，随子元素去撑开父元素高度，如果撑不开，那就是子元素有浮动没有清除
-
- 慕无忌7186117
- 2015-06-11 17:00:18
我也遇到这个问题了，因为里每一个元素的高度都是变化的，我也是只显示第一张图片一个高度的区域
解决办法：给外面的容易定义高度，，但是就不是瀑布流了
-
- Stupid_Fish
- 2015-03-20 13:20:24
是不是要清除下浮动
-
- 单单happy
- 2014-12-16 09:27:11
<!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>
-----------------------------------------------------
运行上面的代码，出现如下，是你要的效果吗？
瀑布流布局
97759 学习 · 736 问题
相似问题