你好社區你好嗎?CSS只有非對稱流體網格
今天我發現了這個驚人的網站,我用各種關鍵詞搜索了我的問題,但沒有運氣。可能是我正在尋找錯誤的條款。如果這是一個重複的答案,我表示歉意。
我想知道如果任何人都可以幫我這個非對稱流體網格,我有,但我不能使用JavaScript或修改HTML,它必須是CSS唯一
的HTML代碼是這樣的:
<ul>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
</ul>
而CSS是這樣的:
ul {
width:1200px;
padding:10px;
}
li.image {
float: left;
margin: 10px;
overflow: hidden;
width:220px;
height:220px;
}
提前感謝任何能夠幫助我的人。
「流體」是指 - 圖像框尺寸不是靜態的(220x220px)?網格應該有響應嗎?如果沒有,我得到了解決方案... – sinisake 2014-10-12 09:00:38
是的,你是對的,我的錯誤。我需要做出快速反應,但是我會爲它做寬度較大的媒體查詢,因爲較大的項目是另一個,因爲設備/分辨率較小。我的意思是,例如第一行的最後2個框不以較小的分辨率顯示(這意味着較大的項目不是相同的數字)。 感謝您花時間回答我!我對你的解決方案很感興趣,即使它是一個不響應的解決方案。 – CaptainBlue 2014-10-12 09:05:46