我正在使用this layout，您可以看到页面底部有一个包含8张图片的部分 - 每张图片都是指向较大图片的超链接。它的工作非常整洁，尤其是。当您将页面调整为较小的大小时，4个单元格变为2，它看起来like this。我想稍微更改它，以便将两个第一张图片合并在一起，因此布局可能看起来like this，当用户调整大小时，它会向他显示正确的布局like this。到目前为止，页面特定部分的html代码如下所示：
<section class="screenshots" id="screenshots">
<div class="container-fluid">
<div class="row">
<ul class="grid">
<li>
<figure>
<img src="img/02-screenshot.jpg" alt="Screenshot 01">
<figcaption>
<div class="caption-content">
<a href="img/large/02.jpg" class="single_image">
<i class="fa fa-search"></i><br>
<p>User Centric Design</p>
</a>
</div>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/03-screenshot.jpg" alt="Screenshot 01">
<figcaption>
<div class="caption-content">
<a href="img/large/03.jpg" class="single_image">
<i class="fa fa-search"></i><br>
<p>Responsive and Adaptive</p>
</a>
</div>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/04-screenshot.jpg" alt="Screenshot 01">
<figcaption>
<div class="caption-content">
<a href="img/large/04.jpg" class="single_image">
<i class="fa fa-search"></i><br>
<p>Absolutely Free</p>
</a>
</div>
</figcaption>
</figure>
</li>
</ul>
</div>
<div class="row">
<ul class="grid">
<li>
<figure>
<img src="img/06-screenshot.jpg" alt="Screenshot 01">
<figcaption>
<div class="caption-content">
<a href="img/large/06.jpg" class="single_image">
<i class="fa fa-search"></i><br>
<p>Exclusive to Codrops</p>
</a>
</div>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/07-screenshot.jpg" alt="Screenshot 01">
<figcaption>
<div class="caption-content">
<a href="img/large/07.jpg" class="single_image">
<i class="fa fa-search"></i><br>
<p>Made with Love</p>
</a>
</div>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/08-screenshot.jpg" alt="Screenshot 01">
<figcaption>
<div class="caption-content">
<a href="img/large/08.jpg" class="single_image">
<i class="fa fa-search"></i><br>
<p>In Sydney, Australia</p>
</a>
</div>
</figcaption>
</figure>
</li>
</ul>
</div>
</div>
</section>
并且css代码如下所示：
/* ==========================================================================
Screenshots Intro
========================================================================== */
.screenshots-intro {
padding: 170px 0 100px 0;
background-color: #f6f7f9;
}
.screenshots-intro h1 {
margin-bottom: 20px;
color: #24374b;
font-weight: 400;
font-size: 22px;
}
.screenshots-intro p {
margin-bottom: 25px;
color: #778899;
}
/* ==========================================================================
Screenshots
========================================================================== */
.screenshots ul {
margin: 0;
padding: 0;
width: 100%;
}
.screenshots ul li {
float: left;
min-height: 100%;
width: 25%;
background-color: #000;
list-style: none;
}
.screenshots figure {
position: relative;
overflow: hidden;
}
.screenshots figure img {
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.screenshots figure:hover img, .screenshots figure:focus img {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.screenshots figcaption {
position: absolute;
top: 0;
left: 0;
padding: 25% 0;
width: 100%;
height: 100%;
background-color: rgba(63, 97, 132, 0.85);
text-align: center;
font-size: 15px;
opacity: 0;
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.screenshots figcaption a {
color: #fff
}
.screenshots figcaption a:hover, .screenshots figcaption a:focus {
color: #73d0da
}
.screenshots figure:hover figcaption, .screenshots figure:focus figcaption {
opacity: 1
}
.visible {
opacity: 1
}
.screenshots figure.cs-hover figcaption {
opacity: 1
}
.screenshots figcaption i {
font-size: 35px
}
.screenshots figcaption p {
margin-bottom: 0;
text-transform: uppercase;
font-weight: 400;
}
.screenshots figcaption .caption-content {
position: absolute;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -100px;
width: 200px;
-webkit-transform: translate(0px, 15px);
-ms-transform: translate(0px, 15px);
transform: translate(0px, 15px);
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.screenshots figure:hover figcaption .caption-content, .screenshots figure:focus figcaption .caption-content {
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
我知道这是很多代码，但也许你们中的任何人都知道如何更改布局的这个特定部分，以便将其包含在图片中？感谢。
答案 0 :(得分：0)
这是更新后的答案。
我正在附加代码和jsfiddle链接。
只需用你的图像替换图像的src即可看到结果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
.container {
width: 100%;
margin: 0 auto;
}
img {
max-width: 100%;
}
/* this css is just for understanding */
.a {
background-color: red;
}
.b {
background-color: green;
}
.c {
background-color: blue;
}
.d {
background-color: black;
}
/* this css is just for understanding */
/* this is the logic to change the positions of image */
@media (min-width: 320px) {
.a,
.b,
.c,
.d {
width: 100%;
float: left;
}
}
@media (min-width: 768px) {
.a,
.b,
.c,
.d {
width: 50%;
float: left;
}
}
</style>
<body>
<div class="container">
<div class="a">
<img src="img/1.png" height="222" width="581">
</div>
<div class="b">
<img src="img/2.jpg" height="222" width="581">
</div>
<div class="c">
<img src="img/3.jpg" height="222" width="581">
</div>
<div class="d">
<img src="img/4.png" height="222" width="581">
</div>
</div>
</body>
</html>
这是jsfiddle链接