Question

我想知道是否有人可以帮助我使用这种不对称的流体网格，但是我不能使用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;
}

Answer 1

如果您将使用媒体查询，这可能有所帮助，希望：

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

Answer 2

我尝试过这个并且可能为你工作，我也按照以下方式工作：

这是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>
	<meta charset="utf-8">
	<title>Asymmetrical Fluid Gride</title>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="column-1">
				<div class="row">
					<div class="column-1"></div>
				</div>
				<div class="row">
					<div class="column-1"></div>
				</div>
			</div>
			<div class="column-1">
				<div class="row">
					<div class="column-1"></div>
				</div>
				<div class="row">
					<div class="column-1"></div>
				</div>
			</div>
			<div class="column-2"></div>
			<div class="column-1">
				<div class="row">
					<div class="column-1"></div>
				</div>
				<div class="row">
					<div class="column-1"></div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="column-2"></div>
			<div class="column-1">
				<div class="row">
					<div class="column-1"></div>
				</div>
				<div class="row">
					<div class="column-1"></div>
				</div>
			</div>
			<div class="column-1">
				<div class="row">
					<div class="column-1"></div>
				</div>
				<div class="row">
					<div class="column-1"></div>
				</div>
			</div>
			<div class="column-1">
				<div class="row">
					<div class="column-1"></div>
				</div>
				<div class="row">
					<div class="column-1"></div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

您可以通过按“运行代码段”在此处运行它希望能解决你的问题...

CSS只有不对称的流体网格

2 个答案: