到目前为止，我有以下JSFiddle，您可以看到以下布局中有8张图片（即链接）：
1 2 3 4
5 6 7 8
我想将1和2组合在一起显示一张图片（它的宽度将由2张单张图片组合而成），所以我想要让X居中，而不是1和2。基本上是这样的：
X 3 4
5 6 7 8
如何修改我的小提琴呢？我知道我必须从HTML中删除第一张图片。但是我该如何修改CSS？
/* ==========================================================================
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);
}<section class="screenshots" id="screenshots">
<div class="container-fluid">
<div class="row">
<ul class="grid">
<li>
<figure>
<img src="http://www.sugarpet.net/oscar.jpg" alt="Screenshot 01">
<figcaption>
<div class="caption-content">
<a href="img/large/01.jpg" class="single_image">
<i class="fa fa-search"></i><br>
<p>Optimised For Design</p>
</a>
</div>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="http://www.sugarpet.net/oscar.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="http://www.sugarpet.net/oscar.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="http://www.sugarpet.net/oscar.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="http://www.sugarpet.net/oscar.jpg" alt="Screenshot 01">
<figcaption>
<div class="caption-content">
<a href="img/large/05.jpg" class="single_image">
<i class="fa fa-search"></i><br>
<p>Multi-Purpose Design</p>
</a>
</div>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="http://www.sugarpet.net/oscar.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="http://www.sugarpet.net/oscar.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="http://www.sugarpet.net/oscar.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>
答案 0 :(得分：0)
如果将图片放在无边框表格中，第一行的第一列和第二列相互跨越，则可能最简单。使用CSS格式化表格要容易得多。 像这样：
<table>
<tr>
<td colspan="2">
<img src="http://www.sugarpet.net/oscar.jpg" alt="Screenshot 01">
<figcaption>
</td>
<td>
<img src="http://www.sugarpet.net/oscar.jpg" alt="Screenshot 01">
<figcaption>
</td>
<td>
<img src="http://www.sugarpet.net/oscar.jpg" alt="Screenshot 01">
<figcaption>
</td>
</tr>
<tr>
<td>
<img src="http://www.sugarpet.net/oscar.jpg" alt="Screenshot 01">
<figcaption>
</td>
<td>
<img src="http://www.sugarpet.net/oscar.jpg" alt="Screenshot 01">
<figcaption>
</td>
<td>
<img src="http://www.sugarpet.net/oscar.jpg" alt="Screenshot 01">
<figcaption>
</td>
<td>
<img src="http://www.sugarpet.net/oscar.jpg" alt="Screenshot 01">
答案 1 :(得分：0)
如果不更改HTML，您可以执行以下操作：
.screenshots .row:first-child ul li:first-child{
display:none;
}
.screenshots .row:first-child ul li:nth-child(2){
width:50%;
}
.screenshots figure img {
width: auto;
max-height: 70px;
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
margin:0 auto;
display:block;
}
这是fiddle。主要限制是图像标记上的max-height: 70px;。
如果您可以删除第一个<li>的第一个ul.grid，那么只需删除nth-child(2)样式并通过删除first-child并添加display:none;选择器进行更新width:50%。