09949 2014-12-16 17:55 采纳率: 100%
浏览 2009
已采纳

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

  • 写回答

2条回答

  • Go 旅城通票 2014-12-17 02:10
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson,入参实体类Person,出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题,上传的坐标文件里是怎么对无序点进行编号的,以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 CSAPPattacklab
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图
  • ¥15 关于大棚监测的pcb板设计
  • ¥15 stm32开发clion时遇到的编译问题
  • ¥15 lna设计 源简并电感型共源放大器
  • ¥15 如何用Labview在myRIO上做LCD显示?(语言-开发语言)