如何解决我的画廊底部有空白
.gallery-mosaic div的底部有多余的空白。是什么原因造成的？如何摆脱空白？ ................................................... ................................................... ................................................... ................................................... ................................................... ......................................
<section class="intro">
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
</nav>
<div class="inner">
<div class="content">
<h1>Tenasi Art</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</section>
<a name="about">
<div class="clearfix"></div>
<section class="left-col">
<h2>About the Photographer</h2>
<p style="text-indent:5%;">Lorem ipsum dolor sit amet,consectetur adipisicing elit. Libero eligendi ab quam necessitatibus. Aspernatur temporibus laudantium cum,aliquid libero,perferendis placeat illum aperiam atque doloremque,architecto molestiae voluptatibus beatae quidem ipsam. Fuga,nemo aperiam nostrum sint autem iusto praesentium deleniti rem,soluta eum voluptatibus voluptas fugiat,assumenda necessitatibus labore. Blanditiis!</p>
</section>
<section class="right-col">
<img src="#" alt="Latricia Muhammad">
</section>
<div class="clearfix"></div>
<a name="gallery"></a>
<h2>Tenasi Art Gallery</h2>
<section class="gallery-mosaic">
<div class="images">
<a href="images/img1.jpg" class="img-1">
<i class="icon ion-md-expand"></i>
</a>
<a href="images/img2.jpg" class="img-2">
<i class="icon ion-md-expand"></i>
</a>
<a href="images/img3.jpg" class="img-3">
<i class="icon ion-md-expand"></i>
</a>
<a href="images/img4.jpg" class="img-4">
<i class="icon ion-md-expand"></i>
</a>
<a href="images/img5.jpg" class="img-5">
<i class="icon ion-md-expand"></i>
</a>
<a href="images/img6.jpg" class="img-6">
<i class="icon ion-md-expand"></i>
</a>
<a href="images/img7.jpg" class="img-7">
<i class="icon ion-md-expand"></i>
</a>
<a href="images/img8.jpg" class="img-8">
<i class="icon ion-md-expand"></i>
</a>
</div>
</section>
<div class="see-all">
<a href="#">See All</a>
</div>
<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
```
```lang-css
body {
font-family:'IBM Plex Sans',sans-serif;
margin:0;
padding:0;
box-sizing: border-box;
width:100%;
}
h1,h2,h3,h4,h5,h6 {
font-weight:bolder;
}
h1{
font-size:55px;
}
h2{
font-size:44px;
}
h3{
font-size:36;
}
h4{
font-size:27;
}
h5{
font-size:20;
}
h6{
font-size:16;
}
/* START GALLERY */
.gallery-mosaic{
width:100%;
max-width:120rem;
margin:auto;
padding:0 1.5rem;
/* background-color: purple; */
}
.images{
/* background-color: green; */
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
grid-gap:1.5rem;
grid-template-areas:
'img-1 img-2 img-3 img-3'
'img-1 img-4 img-4 img-6'
'img-7 img-7 img-8 img-6'
}
.images a{
width:100%;
/* height:25rem; */
background-position: center;
background-repeat: no-repeat;
background-size:cover;
position:relative;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
color:rgba(255,255,.02);
}
.images a ion-icon{
color:rgba(255,.6);
font-size:3rem;
position:relative;
z-index:100;
padding:1rem 3rem;
border:20px solid rgba(255,.6);
border-radius:.4rem;
opacity:0;
transition:opacity .5s;
}
.images a::before{
content:'';
position:absolute;
height:100%;
width:100%;
top:0;
left:0;
background-color: rgba(0,.8);
opacity:0;
transition:opacity .5s;
}
.images a:hover i,.images a:hover::before{
opacity:1;
}
.img-1{
grid-area:img-1;
min-height:51.5rem;
background-image: url('images/img1.jpg');
}
.img-2{
grid-area:img-2;
background-image: url('images/img2.jpg');
}
.img-3{
grid-area:img-3;
background-image: url('images/img3.jpg');
}
.img-4{
grid-area:img-4;
background-image: url('images/img4.jpg');
}
.img-5{
grid-area:img-5;
background-image: url('images/img5.jpg');
}
.img-6{
grid-area:img-6;
min-height:51.5rem;
background-image: url('images/img6.jpg');
}
.img-7{
grid-area:img-7;
background-image: url('images/img7.jpg');
}
.img-8{
grid-area:img-8;
background-image: url('images/img8.jpg');
}
.see-all{
/* background-color: red; */
}
解决方法
这行代码似乎是导致空白的原因：
<a href="images/img5.jpg" class="img-5">
<i class="icon ion-md-expand"></i>
</a>
我删除了那行，空白消失了。您没有在网格中使用该图像。您的网格模板区域中没有img-5。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
