瀑布流-关于CSS子级float，父级高度变化的问题

问题描述

关于CSS子级float，父级高度变化的问题

网页结构说明：

<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却只显示的一小部分（就第一行的高度那么高），其他的显示不出来，我在网上查了查，没有找到解决办法。诚请达人指点指点。谢谢

解决方案

瀑布流里面的元素是absolute定位不占用空间的，所以你的mview对象只有默认的高度。。你需要在你的瀑布流计算完毕后，获取最后一行的元素计算下这个元素的高度+top位置，重设下mview的高度才行

解决方案二：

...解决方案三：

...解决方案四：

 <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" style="width:100px">1</div>
                            <div class="box" style="width:300px">2</div>
                            <div class="box" style="width:100px">3</div>
                            <div class="box" style="width:800px">4</div>
                            <div class="box" style="width:100px">5</div>
                            <div class="box" style="width:100px">6</div>
                            <div class="box" style="width:100px">7</div>
                            <div class="box" style="width:200px">8</div>
                            <div class="box" style="width:100px">9</div>
                            <div class="box" style="width:100px">10</div>
                    </div>
            </div>
            <div id="right">...</div>
    </div>
    <div id="footer">...</div>
</body>