如何垂直排列不同高度的元素?我的意思是用這樣的:無間距垂直排列元素
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?
你可能想看看'Flexbox的' – domsson
@dom我之前曾嘗試過這樣的東西:http://codepen.io/klamping/pen/bddxyr?editors=110但它沒有做我需要的東西:( – ICE
這不是一個石工佈局嗎?考慮使用砌體插件,允許您訂購元素 –