像谷歌加

兩列布局今天我嘗試重新實施相同的兩列布局，如谷歌加帖子的歷史。像谷歌加

我試圖使用列計數，但divs在左列首先打印一個，然後（當第一個填充時）在右列。在這種情況下，divs正確填充它們之間的空間，但順序錯誤。

然後，我嘗試使用引導程序或純CSS，具有響應式網格設計，但我獲得同一列中的div之間的空白空間（只有一個div具有比最近的更高的高度）。

我需要實現加:(在谷歌創建的相同系統感謝您的任何未來的建議，有一個愉快的一天

.multicols { 
    padding:0; 
    column-width: 50%; 
    column-count: 2; 
    -webkit-column-width:50%; 
    -webkit-column-count: 2; 
    -moz-column-width:50%; 
    -moz-column-count: 2; 
    -ms-column-width:50%; 
    -ms-column-count: 2; 
    -o-column-width:50%; 
    -o-column-count: 2; 

    column-gap: 0; 
    -webkit-column-gap: 0; 
    -moz-column-gap: 0; 
    -ms-column-gap: 0; 
    -o-column-gap: 0; 
    vertical-align:text-top; 
} 

.multicols .amulticol { 
    display: inline-block; 
    margin:0; 
    min-height: 100px; 
    break-inside: avoid; 
    -webkit-column-break-inside: avoid; 
    -moz-column-break-inside: avoid; 
    -ms-column-break-before: avoid; 
    -o-column-break-before: avoid; 
}

下面的代碼不起作用：jsfiddle.net/PsL8H

來源

2013-10-16 Matte

使用[jsfiddle]（http://www.jsfiddle.net）發佈您的嘗試代碼並更新您的問題與鏈接 – SaturnsEye

http://jsfiddle.net/PsL8H/對不起傢伙..感謝耐心我'對這個XD有點緊張 – Matte

我看到你試過bootstrap和純CSS來做到這一點，但我相信你會需要Javascript。

請參閱Masonry，「級聯網格佈局庫」，如果它是你所需要的

來源

2013-10-27 05:53:03 Unnawut

回答

相關問題