2017-07-03 76 views
1

我創建了兩個不同尺寸的圓的網格,我有創造界的一個新行沒有它留下缺口的問題(在我的代碼所示) 我試圖得到它以類似於此:enter image description here響應格做出來的圓圈

這裏是我的代碼:

ul { 
 
width:97%; 
 
height:100%; 
 

 
} 
 

 
li.small { 
 
float: left; 
 
margin: 12px; 
 
overflow: hidden; 
 
width:200px; 
 
height:200px; 
 
background-color:palegreen; 
 
border-radius: 50% 
 
} 
 

 
li.big { 
 
float: left; 
 
margin: 10px; 
 
overflow: hidden; 
 
width:460px; 
 
height:460px; 
 
background-color:black; 
 
border-radius: 50% 
 
}
 <ul> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="big"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
     
 

 
</ul>

據我所知,現在有些反應,如它崩潰,BU我希望它摺疊成只有2列。

在此先感謝任何人誰願意幫助!

+0

是確定以更改HTML? –

+0

是的!繼續 – johnstont05

回答

3

你可以給一個嘗試新的CSS網格顯示:下面https://css-tricks.com/snippets/css/complete-guide-grid/

例子或codepen to play with

ul { 
 
padding:0; 
 
margin:0; 
 
display:grid; 
 
grid-template-rows: repeat(auto-fill, 220px); 
 
grid-template-columns: repeat(auto-fill, 220px); 
 
grid-gap:0px; 
 
} 
 

 
li.small { 
 
width:200px; 
 
height:200px; 
 
background-color:palegreen; 
 
border-radius: 50%; 
 
grid-row:auto/span 1; 
 
grid-column:auto/span 1; 
 
margin:10px 0; 
 
} 
 

 
li.big { 
 
margin:0; 
 
width:400px; 
 
height:400px; 
 
background-color:black; 
 
border-radius: 50%; 
 
grid-row:auto/span 2; 
 
grid-column: auto/span 2 
 
} 
 
li { 
 
display:block; 
 
padding:0; 
 
margin:0; 
 
align-self:center; 
 
justify-self: center; 
 
}
<ul> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="big"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="big"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="big"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
<li class="small"></li> 
 
     
 

 
</ul>

或看看磚石JavaScript網格佈局庫https://masonry.desandro.com/

+0

真棒!非常感謝你。 – johnstont05

+0

你知道我可以如何將其集中在網頁上嗎? – johnstont05

+0

你能幫忙嗎? – johnstont05