2 u013182001 u013182001 于 2014.12.17 01:55 提问

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

4个回答

showbo
showbo   Ds   Rxr 2014.12.17 10:10
已采纳

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

u013182001
u013182001 哦,谢谢,根据你的提示,我找到了问题的原因。非常感谢。。
3 年多之前 回复
showbo
showbo 回复u013182001: 这得具体看你用的那个瀑布流插件了或者你自己写的?这个需要重设容器高度才行
3 年多之前 回复
u013182001
u013182001 你能说的详细点吗?或者留个联系方式
3 年多之前 回复
danielinbiti
danielinbiti   Ds   Rxr 2014.12.17 09:58


...


...


...

<!---->
1

2

3

4

5

6

7

8

9

10



...


...

danielinbiti
danielinbiti   Ds   Rxr 2014.12.17 09:59


...


...


...

<!---->
1

2

3

4

5

6

7

8

9

10



...


...


danielinbiti
danielinbiti   Ds   Rxr 2014.12.17 09:59
 <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>
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
解决子级用CSS float浮动 而父级div没高度不能自适应高度
当一个div的子级用了float浮动时,这个div的高度就不受子级div高度的影响了。 如:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父div不自适应高度实例</title> </head> <style> .father { width:500px; border:1px soli
web 解决在父级div填充子div,父div高度自适应问题
在div中我们有时候,不可避免的回想起中添加许多子div,并且他们都是流动模式的。这样子父级里面的div,高度总是0。 要想让其自适应高度,得在父div添加。 overflow: hidden
12.当没有给父级设置高度的时候,子集的高度会加载到父级身上!
当没有给父级设置高度的时候,           子集的高度会加载到父级身上!          asdasd          ul li{                  width: 100px;         height: 100px;         background: red;         margin-bottom: 10px;
css解决浮动带来的父级div高度不自动增加的问题
当设置为float时,父级不会自动计算float的高度,所以导致父级没有被float的内容撑开,下面有几种解决办法方法一、设置父级为固定高度方法二、在父级最后添加一个空的class为“clear”,div<div class="clear"></div> “clear”的css为:.clear{ clear:both} 方法三、使用after伪类(推荐)div:after{ content:".";
解决子元素用css float浮动后父级元素高度自适应高度
解决子y元素用css float浮动后父级元素高度自适应高度正常HTML当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因。
利用overflow属性解决子元素float浮动后父级元素高度无法自适应的问题
在进行页面布局的时候经常
让div父元素的高度随子元素高度的变化而变化
先看下html代码: test /* main是父元素没有设置高度,我们想让其随子元素高度的变化而变化*/ #main{width:800px; border:5px solid red;} #left{width:400px; height:200px; background:green; float:left;} #right{width:200
css之子元素浮动导致父元素高度塌陷解决方案
问题引入:在制作导航栏时,若父元素ul不给出高度的具体数值,只给背景。而子元素li又用到了float:left。 那么,这种情况就会导致父元素的背景“消失”,因为浮动元素脱离文档流,不占据空间,因此相当于父列表没有内容。 解决方案: 一:添加进行清理浮动的元素(但书中说,这会在页面中增加不必要的标记,不建议用这种方法)。 二: (1)使父元素也添加float (2)使父元素posati
css如何让父元素div的高度随着子元素的div的高度变动而自适应
例如:下面的div如果想father的div随着son的div自动适应搞度,只需要加上一个清除浮动的标签即可!&amp;lt;div class='father'&amp;gt; &amp;lt;div class='son'&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;br style='clear:both'/&amp;gt;&amp;lt;!--只要清除浮动即可--&amp;gt; &amp;lt;/div&amp;gt;...
css中子元素根据父元素设置百分比高度的问题。
关于设置html元素高、宽百分比时需要注意的一个细节。