Question

我希望能够“包装”不同大小的不同div 类似于Microsoft Word的文字包装，方形，它只是与其余部分混合。

我的结构简化了

<div id = "div1"></div>
<div id = "div2"></div>
<div id = "bigdiv1"></div>
<div id = "div3"></div>
<div id = "div4"></div>
<div id = "div5"></div>
<div id = "div6"></div>
<div id = "div7"></div>
<div id = "div8"></div>
<div id = "div9"></div>
<div id = "div10"></div>

看起来像是这样的： http://postimg.org/image/d3mot921d/ 但我希望它看起来像：http://postimg.org/image/w8doc5ofx/ 同样使用左右浮动也不会按照需要工作（我认为），因为我希望能够放入多个那些大的div。所以3个大的div应该漂浮在中间的小div。但是你会得到那些空白区域，我不知道如何移除它们。

同样使用Javascript和Jquery就可以了。

我还没有找到一个甚至接近我想要的解决方案，我希望你们中的一些人知道如何做到这一点。

Answer 1

有几种方法可以实现这一点，我将在此列出一些：

using CSS3 columns（相对poor browser support）。查看Someone else's jsFiddle

.parent-div{
   -moz-column-width: 13em;
   -webkit-column-width: 13em;
   -moz-column-gap: 1em;
   -webkit-column-gap: 1em;
}

使用masonry library

$('.parent-div').masonry({
   // options
   columnWidth: 200,
  itemSelector: '.item'
});

将HTML结构更改为include column divs

<div class="two-columns">
    <div></div>
    <div></div>
</div>
<div class="double-wide">
</div>
<div class="two-columns">
    <div></div>
    <div></div>
    <div></div>
</div>

Personaly，我建议使用the masonry jQuery plugin来实现向后兼容性。如果仅针对现代浏览器（ie10 and better）

，则为CSS3列

CSS包装不同大小的div

1 个答案: