「鏈接」不同高度的塊與顯示：內聯塊

爲了說明我的問題：http://jsfiddle.net/89bnF/762/「鏈接」不同高度的塊與顯示：內聯塊

我使用與具有不同高度的塊2列布局：

.thumbBlock { 
    display: inline-block; 
    background-color: #efbf53; 
    width: 45%; 
    padding: 10px; 
    margin: 5px; 
    vertical-align: top; 
    border: 1px solid #aaa; 
}

我想就像n°3塊剛好位於n°2塊左邊的n°1塊（由於塊n°2更高而沒有白色間隙）。這可能與行內塊？如果不是，我應該使用什麼，知道結果必須「響應兼容」？（我沒有在例子中包括媒體查詢部分）

感謝您的幫助！

OLZ

來源

2014-08-27 olz0508

你要麼需要JavaScript來的div的位置，你想（見masonry項目），或者你身邊有一個的div包含分區，然後一些浮動來獲得預期的效果：

jsFiddle example

CSS

.l { 
    float:left; 
    clear:left; 
} 
.r { 
    float:right; 
    clear:right; 
}

HTML

<div id="container"> 
    <div class="thumbBlock l">Bla Bla1 
     <br />Bla Bla1</div> 
    <div class="thumbBlock r">Bla Bla2 
     <br />Bla Bla2 
     <br />Bla Bla2 
     <br />Bla Bla 
     <br />Bla Bla 
     <br />Bla Bla 
     <br />Bla Bla 
     <br />Bla Bla</div> 
    <div class="thumbBlock l">Bla Bla3 
     <br />Bla Bla3 
     <br />Bla Bla3</div> 
    <div class="thumbBlock r">Bla Bla4 Bla Bla4 
     <br />Bla Bla4 
     <br />Bla Bla4 
     <br />Bla Bla4</div> 
</div>

來源

2014-08-27 15:43:34 j08691

「鏈接」不同高度的塊與顯示：內聯塊

回答

相關問題