html – 不同的高度div在两列中浮动

发布时间：2020-12-14 19:37:04 所属栏目：资源来源：网络整理

导读：我有两列,想按照外观的顺序堆叠不同高度的div. 动态创建div. 如果我只将它们漂浮在宽度的50％,那么我很快就会遇到这样的情况：div#4比传入的几个div高5倍.然后下一个div与上一个div的底部顶部对齐. 我需要将容器中的小孩子div设置为完全匹配： ----- -------

我有两列,想按照外观的顺序堆叠不同高度的div.

动态创建div.

如果我只将它们漂浮在宽度的50％,那么我很快就会遇到这样的情况：div#4比传入的几个div高5倍.然后下一个div与上一个div的底部顶部对齐.

我需要将容器中的小孩子div设置为完全匹配：

----- -------
  1      2
-----
  3   -------
-----    4
  5
-----
  6
-----
  7   -------
-----    8
  9

----- 
 10   -------
        11
      -------
      -------
-----

这是代码片段我做了什么：

<style>
    .box {background:#20abff; color:#fff; width:50%; margin: 5px;}
    .left {float:left;}
    .right {float:right;}
    .container {width:205px;}
</style>
    <body>
        <div class="container">
            <div class="box left" style="height:60px;">1</div>
            <div class="box left" style="height:80px;">2</div>
            <div class="box left" style="height:30px;">3</div>
            <div class="box left" style="height:70px;">4</div>
            <div class="box left" style="height:60px;">5</div>
            <div class="box left" style="height:20px;">6</div>
            <div class="box left" style="height:40px;">7</div>
            <div class="box left" style="height:90px;">8</div>
            <div class="box left" style="height:30px;">9</div>
        </div>
    </body>

它看起来类似于此

http://dl.dropbox.com/u/142343/divstack.html

欣赏帮助

解决方法

您将不得不使用JavaScript来执行此操作.如果你使用的是jQuery,那么有一个非常好的插件叫做 Masonry,还有 non jQuery version.

引用README on GitHub：

Masonry is a dynamic grid layout script. Think of it as the flip-side
of CSS floats. Whereas floating arranges elements horizontally then
vertically,Masonry arranges elements vertically,positioning each
element in the next open spot in the grid. The result minimizes
vertical gaps between elements of varying height,just like a mason
fitting stones in a wall.

single column layout可能是你要找的.

如果你不介意将旧的浏览器放在灰尘中,那么有CSS3 column properties.有一个例子here,on Quirksmode,有一些MDN的文档.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!