html - 我的画廊底部有空白区域
问题描述
我的 .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,255,.02);
}
.images a ion-icon{
color:rgba(255,255,255, .6);
font-size:3rem;
position:relative;
z-index:100;
padding:1rem 3rem;
border:20px solid rgba(255,255,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,0,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。
推荐阅读
- javascript - 如何在 JS 中只指定被点击的元素
- sql - 在 SQL Server 中更改日期格式
- bash - 回显另一个回显语句的值
- java - OWASP Java Encoder 1.2.2 版本兼容JDK1.8
- group-by - 如何按某个类别对 geopandas 中的多边形进行分组和合并?
- php - 如何在imagettftext上转换字体高度
- php - 无法从 scandir 数组中删除“.”/“..”
- node.js - 如何为 Web 应用程序执行特定于设备的身份验证?
- tkinter - 为什么 fielddialog 小部件在退出时会重新启动 Spyder 内核?
- vagrant - 在 SLS 文件中使用 create_self_signed_cert