问答详情
源自:3-2 jQuery实现瀑布流布局的图片加载功能

CSS中父元素高度没有随子元素高度的改变而改变,应该如何解决?

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


5491996e0001794105000287.jpg

提问者:09949 2014-12-16 01:38

个回答

  • 似鹿
    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>

    -----------------------------------------------------

    运行上面的代码,出现如下,是你要的效果吗?

    548f8a4e0001402d02360349.jpg