無間距垂直排列元素

Question

如何垂直排列不同高度的元素？我的意思是用這樣的：

div[class^="elm"]{ 
 
\t width: 50%; 
 
\t display: inline-block; 
 
\t margin-bottom: 20px; 
 
\t background-color: gray; 
 
} 
 
\t 
 
.elm1{ 
 
\t height: 100px; 
 
} 
 
\t 
 
.elm2{ 
 
\t height: 200px; 
 
} 
 
\t 
 
.elm3{ 
 
\t height: 160px; 
 
} 
 
\t 
 
.elm4{ 
 
\t height: 110px; 
 
} 
 
\t 
 
.elm5{ 
 
\t height: 60px; 
 
} 
 
\t 
 
.elm6{ 
 
\t height: 220px; 
 
} 
 
\t 
 
.elm7{ 
 
\t height: 90px; 
 
}

<div class="elm1">Element 1</div><div class="elm2">Element 2</div><div class="elm3">Element 3</div><div class="elm4">Element 4</div><div class="elm5">Element 5</div><div class="elm6">Element 6</div><div class="elm7">Element 7</div>

，並顯示這個樣子（順序很重要）：

我知道這種類型的事情可以發生有兩個街區。每列爲一列，但它使我在在響應式設計中使用JavaScript（使其超過兩列）。

示例 Google+使用JavaScript進行多塊處理。我怎樣才能做到這一點，而不使用JavaScript和只有CSS？

Answer 1

這是輸出你期待

這可能幫助你

Check output in Codepen.io

div[class^="elm"] { 
 
    width: 50%; 
 
    display: block; 
 
    background-color: gray; 
 
} 
 

 
.elm1 { 
 
    height: 100px; 
 
    margin: 2px; 
 
} 
 

 
.elm2 { 
 
    height: 200px; 
 
    position: relative; 
 
    left: 10px; 
 
    top: -105px; 
 
    float: right; 
 
} 
 

 
.elm3 { 
 
    height: 160px; 
 
    margin: 2px; 
 
} 
 

 
.elm4 { 
 
    height: 110px; 
 
    margin: 2px; 
 
    position: relative; 
 
    left: 10px; 
 
    top: -105px; 
 
    float: right; 
 
} 
 

 
.elm5 { 
 
    height: 60px; 
 
} 
 

 
.elm6 { 
 
    height: 220px; 
 
    margin: 2px; 
 
    position: relative; 
 
    left: 10px; 
 
    top: -105px; 
 
    float: right; 
 
} 
 

 
.elm7 { 
 
    height: 90px; 
 
    margin: 2px; 
 
}

<div class="elm1">Element 1</div> 
 
<div class="elm2">Element 2</div> 
 
<div class="elm3">Element 3</div> 
 
<div class="elm4">Element 4</div> 
 
<div class="elm5">Element 5</div> 
 
<div class="elm6">Element 6</div> 
 
<div class="elm7">Element 7</div>

Answer 2

您可以通過float: left和float: right之間交替做到這一點：

.items { 
 
    display: block; 
 
    overflow: hidden; 
 
    width: 400px; 
 
} 
 

 
.item { 
 
    box-sizing: border-box; 
 
    width: 190px; 
 
    margin: 5px; 
 
    padding: 5px; 
 
    background: #000; 
 
    color: #fff; 
 
    text-align: center; 
 
    font-family: 'Arial', 'Helvetica', sans-serif; 
 
    font-size: 48pt; 
 
    font-weight: bold; 
 
} 
 

 
.item:nth-child(odd) { 
 
    float: left; 
 
} 
 

 
.item:nth-child(even) { 
 
    float: right; 
 
} 
 

 
.elm1 { 
 
    height: 100px; 
 
} 
 
\t 
 
.elm2 { 
 
    height: 200px; 
 
} 
 
\t 
 
.elm3 { 
 
    height: 160px; 
 
} 
 
\t 
 
.elm4 { 
 
    height: 110px; 
 
} 
 
\t 
 
.elm5 { 
 
    height: 60px; 
 
} 
 
\t 
 
.elm6 { 
 
    height: 220px; 
 
} 
 
\t 
 
.elm7 { 
 
    height: 90px; 
 
}

<div class="items"> 
 
    <div class="item elm1">1</div> 
 
    <div class="item elm2">2</div> 
 
    <div class="item elm3">3</div> 
 
    <div class="item elm4">4</div> 
 
    <div class="item elm5">5</div> 
 
    <div class="item elm6">6</div> 
 
    <div class="item elm7">7</div> 
 
</div>

希望這有助於。

編輯：這仍然可能失敗，這取決於瓦片的高度，因爲在這裏可以看到：https://jsfiddle.net/f16apso8/ - 更好的（實際）解決方案在這裏的：How to Create Grid/Tile View with CSS?