Grid Box在divs之間切換

我正在嘗試使用css製作迷你網格帖子佈局。但我有一個divs的問題。我已經嘗試在這demo頁面。而我沒有得到我想要的形狀。我想讓它像截圖Grid Box在divs之間切換

我試着像這樣的CSS代碼：

.div { 
    position:relative; 
    float:left; 
    width:100%; 
    border-radius:5px; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    background-color:#1d1f20; 
} 

.div:nth-child(1){ 
    width:180px; 
    padding-top:180px; 
    margin-right:5px; 
    margin-bottom:5px; 
} 
.div:nth-child(2){ 
    width:180px; 
    padding-top:180px; 
    margin-right:5px; 
    margin-bottom:5px; 
} 
.div:nth-child(3){ 
    width:400px; 
    padding-top:400px; 
    margin-right:5px; 
    margin-bottom:5px; 
} 
.div:nth-child(4){ 
    width:180px; 
    padding-top:180px; 
    margin-right:5px; 
    margin-bottom:5px; 
} 
.div:nth-child(5){ 
    width:365px; 
    padding-top:180px; 
    margin-right:5px; 
    margin-bottom:5px; 
} 

.div:nth-child(6){ 
    width:180px; 
    padding-top:180px; 
    margin-right:5px; 
    margin-bottom:5px; 
}

HTML

<div class="container"> 
    <div class="div"></div> 
    <div class="div"></div> 
    <div class="div"></div> 
    <div class="div"></div> 
    <div class="div"></div> 
    <div class="div"></div> 
</div>

我怎樣才能CSS中的截圖？任何人都可以幫助我嗎？

來源

2016-11-07 Azzo

只有CSS或者你可以使用JS/JQuery？ – paolobasso

@ paolo.basso99我只想讓它只用CSS。我知道我可以用js做到這一點，但如果可能的話，我只想在CSS中做到這一點。 – Azzo

您可以使用大量的解決方案：

解決方法一：

使用新column-count。 DEMO。

Check瀏覽器的兼容性。

解決方法二：

使用display:inline-block;。 DEMO。

Check瀏覽器的兼容性。

解決方法三：

使用flexbox。 DEMO。

Check瀏覽器的兼容性。

解決方法四：

使用jQuery，我建議你Masonry插件（通常用於畫廊）。 DEMO。

來源

2016-11-07 22:29:25 paolobasso

我不知道如果這是你在找什麼，我不得不調整你的HTML才達到，這裏是鏈接：http://codepen.io/saa93/pen/ENjNgy

<style> 
body,html { 
    padding:0px; 
    margin:0px; 
    width:100%; 
    height:100%; 
} 
.container { 
    position:relative; 
    width:100%; 
    max-width:1010px; 
    min-height:400px; 
    margin:0px auto; 
} 

.div { 
    position:relative; 
    float:left; 
    width:100%; 
    border-radius:5px; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    background-color:#1d1f20; 
} 

.div:nth-child(1) { 
    background: transparent none repeat scroll 0 0; 
    float: left; 
    width: 370px; 
} 


.div:nth-child(3){ 
    width:180px; 
    float:left; 
} 
.div:nth-child(1) > .div:nth-child(1){ 
    background-color:#1d1f20; 
    width:180px; 
    padding-top:180px; 
    margin-right:5px; 
    margin-bottom:5px; 
} 
.div:nth-child(1) > .div:nth-child(2){ 
    width:180px; 
    padding-top:180px; 
    margin-right:5px; 
    margin-bottom:5px; 
} 
.div:nth-child(1) > .div:nth-child(3) { 
    margin-bottom: 5px; 
    margin-right: 5px; 
    padding-top: 185px; 
    width: 365px; 
} 

.div:nth-child(2) { 
    margin-bottom: 5px; 
    margin-right: 5px; 
    padding-top: 370px; 
    width: 400px; 
} 
.div:nth-child(3) > .div:nth-child(1){ 
    width:180px; 
    padding-top:180px; 
    margin-right:5px; 
    margin-bottom:5px; 
} 

.div:nth-child(3) { 
    float: left; 
    width: 180px; 
} 
.div:nth-child(3) > .div:nth-child(2){ 
    width:180px; 
    padding-top:180px; 
    margin-right:5px; 
    margin-bottom:5px; 
} 

</style> 
<div class="container"> 
    <div class="div"> 
     <div class="div"></div> 
     <div class="div"></div> 
     <div class="div"></div> 
    </div> 
    <div class="div"></div> 


    <div class="div"> 
    <div class="div"></div> 
    <div class="div"></div> 
    </div> 
</div>

我希望這有助於:)

來源

2016-11-07 22:39:21

Grid Box在divs之間切換

回答

相關問題