如何使不同尺寸

的項目畫廊我要讓這樣的事：如何使不同尺寸

我想用最乾淨的，語義和響應式佈局要做到這一點，如果是可能的。

當我說乾淨，我指的是這樣的事情。

<div class="gallery"> 
    <div>Item 1</div> 
    <div>Item 2</div> 
    <div>Item 3</div> 
    <div>Item 4</div> 
    <div>etc...</div> 
</div>

並使用CSS來對齊，重新縮放和重新定位項目。

PD1：這是可能的只有HTML + CSS？

PD2：Flexbox可以嗎？

來源

2016-12-24 GhostOrder

你應該看一些網上的模板。當你被卡住並且有一些代碼卡住時，來到stackoverflow。 – ab29007

檢查這個地址：http://codepen.io/desandro/pen/osFxj ...可能是有幫助的.. –

http://masonry.desandro.com/layout.html –

那麼東西像這將使流垂直，並允許包裝。

*{box-sizing:border-box} 
 
.gallery{ 
 
    display:flex; 
 
    flex-direction:column; 
 
    flex-wrap:wrap; 
 
    height:300px; 
 
    width:100%; 
 
} 
 
.gallery > *{ 
 
    flex:0 0 1; 
 
    height:50%; 
 
    background:teal; 
 
    border:1px solid #000; 
 
    color:#fff; 
 
    padding:20px; 
 
} 
 
.gallery > :nth-child(5n){ 
 
    height:100%; 
 
}

<div class="gallery"> 
 
    <div>item 1</div> 
 
    <div>item 2</div> 
 
    <div>item 3</div> 
 
    <div>item 4</div> 
 
    <div>item 5</div> 
 
    <div>item 6</div> 
 
    <div>item 7</div> 
 
</div>

來源

2016-12-24 16:41:55

不錯！這正是我一直在尋找的，我也試圖用flexbox，但我無法得到這個結果。謝謝！ – GhostOrder

如何使不同尺寸

回答

相關問題