3

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

2 回答 2

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;
}
于 2014-10-12T09:10:09.823 回答
1

我试过这个，也许对你有用，我也做了如下：

这是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>
您可以通过按“运行代码片段”在此处运行它，希望能解决您的问题...

于 2014-10-12T09:49:34.517 回答