如何忽略邊緣內嵌塊創建不同的高度？

我有一個問題，塊堆積2，並且接下來的2個塊在前2個塊的末尾開始。如this JSFiddle demo所示。如何忽略邊緣內嵌塊創建不同的高度？

HTML：

<div class="container"> 
    <div class="inline"> 
    A div with less content than that one > 
    </div> 
    <div class="inline"> 
    A div with more content than the one on the left. Now Inline 3 goes down to where this div ends. I want to move it up however, so it's right under the div that's above Inline 3. 
    </div> 
    <div class="inline"> 
    Inline 3 
    </div> 
    <div class="inline"> 
    Inline 4 
    </div> 
</div>

CSS：

.container { 
    width:600px; 
    background-color:rgb(40,40,40); 
} 

.inline { 
    width:calc(50% - 22px); 
    display:inline-block; 
    vertical-align:top; 
    color:white; 
    background-color:#e74c3c; 
    text-align:center; 
    margin:5px 10px; 
}

輸出：

注意：這不佔用由右上角div創建的空白區域。

預期/希望輸出：

注：這並利用空白。

我知道這是可能的2列，但我不想使用2列。因爲我必須能夠刪除一些div，而不會在列中有不相等的內容。

來源

2015-12-16 Daan Heskes

我在創建的網站上遇到同樣的問題。我用磚石來解決： http://masonry.desandro.com/

來源

2015-12-16 08:47:15 brandelizer

您可以嘗試使用column-count財產，

知道該項目將在列降序排列。

fiddle

來源

2015-12-16 08:57:15 maioman

的定位是好的，但我不希望項目進行重新排序。這會令人困惑，因爲內容是動態創建的，如下所示：https://jsfiddle.net/rezf2mbs/11/ –

難道這不是基於行來應用，而是基於列？ –

你有沒有試過石工？ – maioman

通過增加第二類使它有更多的內容浮到右邊的格。

HTML

<div class="inline right"> 
    A div with more content than the one on the left. Now Inline 3 goes 
    down to where this div ends. I want to move it up however, so it's 
    right under the div that's above Inline 3. 
</div>

CSS

.right { 
    float: right; 
}

fiddle

來源

2015-12-16 09:13:22

如何忽略邊緣內嵌塊創建不同的高度？

回答

相關問題