CSS只有非對稱流體網格

今天我發現了這個驚人的網站，我用各種關鍵詞搜索了我的問題，但沒有運氣。可能是我正在尋找錯誤的條款。如果這是一個重複的答案，我表示歉意。

我想知道如果任何人都可以幫我這個非對稱流體網格，我有，但我不能使用JavaScript或修改HTML，它必須是CSS唯一

enter image description here

的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; 
}

提前感謝任何能夠幫助我的人。

來源

2014-10-12 CaptainBlue

「流體」是指 - 圖像框尺寸不是靜態的（220x220px）？網格應該有響應嗎？如果沒有，我得到了解決方案... – sinisake 2014-10-12 09:00:38

是的，你是對的，我的錯誤。我需要做出快速反應，但是我會爲它做寬度較大的媒體查詢，因爲較大的項目是另一個，因爲設備/分辨率較小。我的意思是，例如第一行的最後2個框不以較小的分辨率顯示（這意味着較大的項目不是相同的數字）。感謝您花時間回答我！我對你的解決方案很感興趣，即使它是一個不響應的解決方案。 – CaptainBlue 2014-10-12 09:05:46

如果你會使用媒體查詢，這可能幫助，希望：

HTML：

<ul> 
    <li class="image"></li> 
    <li class="image"></li> 
    <li class="image2"></li> 
    <li class="image"></li> 
    <li class="image"></li> 
    <li class="image fix1" ></li> 
    <li class="image2"></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 fix2"></li> 

</ul>

CSS：

ul { 
width:1200px; 
padding:10px; 
} 
li.image { 
float: left; 
margin: 10px; 
overflow: hidden; 
width:220px; 
height:220px; 
background-color:black; 
} 
li.image2 { 
float: left; 
margin: 10px; 
overflow: hidden; 
width:460px; 
height:460px; 
background-color:black; 
} 
li.fix1 { 
    margin-top:-230px; 
} 
li.fix2 { 
    margin-top:-710px; 
    margin-left:250px; 
}

演示： http://fiddle.jshell.net/upwxrga3/show/

編輯：更新CSS，因爲HTML不能更改：

ul { 
width:1200px; 
padding:10px; 
} 
li.image { 
float: left; 
margin: 10px; 
overflow: hidden; 
width:220px; 
height:220px; 
background-color:black; 
} 


ul li:nth-child(3), ul li:nth-child(7) { 
    float: left; 
margin: 10px; 
overflow: hidden; 
width:460px; 
height:460px; 
background-color:black; 
} 

ul li:nth-child(6) { 
    margin-top:-230px; 
} 
ul li:nth-child(14) { 
    margin-top:-710px; 
    margin-left:250px; 
}

來源

2014-10-12 09:10:09 sinisake

感謝Nevermind，我忘了提及我無法修改html，因爲代碼是通過一個位於服務器中的javascript文件自動生成的。這就像一個畫廊小部件，但我只能設計結果，我不能修改其他任何東西。可能是我可以使用nth-child ...你在想什麼？ – CaptainBlue 2014-10-12 09:16:28

感謝沒關係！正在小提琴中工作。我會測試我的本地文件，我再次回答。有沒有謝謝你的按鈕，謝謝你或者給你添加聲望的方法？我不知道關於stackoverflow的這件事...我會閱讀幫助。 – CaptainBlue 2014-10-12 09:28:12

工作就像一個魅力！謝謝你花時間回答我。我會閱讀關於如何用聲譽或投票表示感謝的方式。 – CaptainBlue 2014-10-12 09:32:58

我想就這個問題和可能爲你工作，也是我做了如下：

這是CSS：

*{box-sizing: border-box;} 
 

 
html{height: 100%;} 
 

 
body{margin: 0;} 
 

 
.container{ 
 
    margin: 0 auto; 
 
    width: 970px; 
 
} 
 

 
.row{ 
 
    width: 100%; 
 
    margin-right: -15px; 
 
    margin-bottom: 20px; 
 
    margin-left: -15px; 
 
} 
 

 
.container > .row:first-child{ 
 
    margin-bottom: 0; 
 
} 
 

 
.row:before, .row:after{ 
 
    content: " "; 
 
    display: table; 
 
} 
 
.row:after{clear: both;} 
 

 
[class*=column-]{ 
 
    float: left; 
 
    min-height: 150px; 
 
    padding: 15px; 
 
    position: relative; 
 
} 
 

 
[class*=column-] [class*=column-]{ 
 
    background-color: lightgrey; 
 
    background-clip: content-box; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 
[class*=column-] .row{ 
 
    margin: 0 0 20px; 
 
} 
 

 
[class*=column-] .row:last-child{ 
 
    margin: 0; 
 
} 
 

 
.column-1{width: 20%;} 
 
.column-2{ 
 
    background-color: lightgrey; 
 
    background-clip: content-box; 
 
    height: 350px; 
 
    width: 40%; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <title>Asymmetrical Fluid Gride</title> 
 
</head> 
 
<body> 
 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="column-1"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="column-1"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="column-2"></div> 
 
\t \t \t <div class="column-1"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="column-2"></div> 
 
\t \t \t <div class="column-1"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="column-1"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="column-1"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

您可以在這裏按運行「運行代碼片段」希望能夠解決您的問題...

來源

2014-10-12 09:49:34 MNR

感謝穆罕默德你的答案！不幸的是，我不能編輯或修改HTML代碼，只有CSS。但再次感謝。 – CaptainBlue 2014-10-12 10:02:48

好的沒問題，但是在剛剛提到的問題中沒有提到，因爲我不能使用JavaScript，這意味着CSS和HTML都不錯。 – MNR 2014-10-12 10:08:13

我在評論下面的評論中提到了這個問題。但我只是修改了原來的問題來解決這個問題。謝謝。 – CaptainBlue 2014-10-12 20:37:54

CSS只有非對稱流體網格

回答

相關問題