不同尺寸的CSS包装

我希望能够“包装”不同尺寸的不同尺寸的文档就像Microsoft Word用文字环绕，正方形一样，它与其余部分融合在一起。不同尺寸的CSS包装

我有一个结构，这里simplefied

<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/ 也使用浮动离开，然后根据需要右不会工作，（我认为），因为我希望能够投入多个大型股利机构。因此，3个大分区应该与小分区之间浮动。但你得到那些空白，我不知道如何删除它们。

另外使用Javascript和Jquery会好的。

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

来源

2013-12-10 geert111223

这是纯CSS的困难，检查砖石插件http://masonry.desandro.com/ – roo2

正如说我愿意使用Javascript，但我会像一个CSS版本，如果不可能，那么我会使用插件，谢谢你的回答 – geert111223

有几种方法来acomplish这一点，我将列出几个在这里：

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>

本人来说，我建议使用the masonry jQuery plugin的向后兼容性。或CSS3列，如果只针对现代浏览器（ie10 and better）

来源

2013-12-10 11:46:05 roo2

好吧，所以我得到了这JSFiddle http://jsfiddle.net/VyxRs/1/（使其更广泛，以表明它是坏的）使用你说的第一个选项，它会打破我的div的宽度（或者我做错了）还没有尝试过第三个选项，会看到那是什么，但如果我不能使用其他选项，我会使用Masonry插件，即时通讯只是在稍微寻找一个CSS解决方案。 – geert111223

不同尺寸的CSS包装

回答

相关问题