不同尺寸的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包裝

回答

相關問題