仅使用CSS实现不对称流体网格布局

Question

仅使用CSS实现不对称流体网格布局

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

- CaptainBlue

“Fluid” 的意思是 - 图像框的尺寸不是静态的（220x220px）？网格应该是响应式的吗？如果不是，我有解决方案... - sinisake

是的，你说得对，我的错误。我需要响应式设计，但我会使用媒体查询来实现，因为当设备/分辨率变小时，更大的项目与之不同。我的意思是，例如第一行的最后两个框在较小的分辨率下不会显示（这意味着更大的项目数量不同）。感谢您抽出时间回答我！即使它不是响应式设计，我也对您的解决方案很感兴趣。 - CaptainBlue

2个回答

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>

you can run it in here by pressing "Run code snippet" hope to solve your problem...

- MNR

谢谢穆罕默德的回答！不幸的是，我不能编辑或修改HTML代码，只能修改CSS。但还是谢谢。 - CaptainBlue

好的，没问题，但是你的问题中没有提到这一点，你只是说我不能使用JavaScript，这意味着CSS和HTML是可以的。 - MNR

我在问题下面的评论中提到了这一点。但是我刚刚修改了原始问题来解决这个问题。谢谢。 - CaptainBlue

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sinisake · Accepted Answer

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

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

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