css根據動態列表製作一個列表

Question

我想在css中創建一個列表，但我不知道如何去做。 我有一個浮動左邊的divs，它們的寬度總是不變（240px），但它們的高度可以是動態的。

需要計算的更多參數是行數也是動態的，在這張圖中是3行，但它可以是4，5甚至10行（基於screen.width）所以我可以「T使用此代碼：

<div class="row1"> 
    <div class="list-box"></div> 
    <div class="list-box"></div> 
    <div class="list-box"></div> 
    <div class="list-box"></div> 
    <div class="list-box"></div> 
</div> 

<div class="row2"> 
    <div class="list-box"></div> 
    <div class="list-box"></div> 
    <div class="list-box"></div> 
    <div class="list-box"></div> 
</div> 

<div class="row3"> 
    <div class="list-box"></div> 
    <div class="list-box"></div> 
    <div class="list-box"></div> 
</div> 

，這是我想在CSS，使畫面： http://i.stack.imgur.com/usPlB.png：

在此先感謝， 丹尼爾。

Answer 1

實際上，您無法在純CSS中執行此操作，因爲您需要JavaScript才能夠動態計算水平放置東西的位置。

但是，您可以使用Masonry，它既可以作爲獨立程序使用，也可以作爲jQuery插件使用。