为了账号安全,请及时绑定邮箱和手机立即绑定

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

正在回答

6 回答

父元素不要设置固定高度,随子元素去撑开父元素高度,如果撑不开,那就是子元素有浮动没有清除

0 回复 有任何疑惑可以回复我~

我也遇到这个问题了,因为里每一个元素的高度都是变化的,我也是只显示第一张图片一个高度的区域

解决办法:给外面的容易定义高度,,但是就不是瀑布流了


0 回复 有任何疑惑可以回复我~

是不是要清除下浮动

0 回复 有任何疑惑可以回复我~

<!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

0 回复 有任何疑惑可以回复我~
#1

09949 提问者

不是啊,我做了补充
2014-12-17 回复 有任何疑惑可以回复我~
#2

慕无忌7186117 回复 09949 提问者

问一下最后你这个问题解决了吗?我现在也碰到这个问题了
2015-06-12 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信