问题描述
我想使用网格将 3 个元素排列在一列中,但标签对列造成了问题。当网格在第一个元素中没有标签时,一切正常。如果我在第一个元素中插入标签,它会创建一个洞并移动第一个元素
)。为什么? (不知道是不是这个原因,我在项目中安装了bootstrap)
HTML
<section class="topic">
<div class="multi-themes">
<div class="single-theme" style="background-image: url('{% static 'images/image.svg' %}')">
<div class="cont-txt-theme">
<p class="txt-theme">prova prova</p>
<p class="sub-txt-theme">prova prova</p>
</div>
</div>
<div class="single-theme" style="background-image: url('{% static 'images/image4.svg' %}')">
<div class="cont-txt-theme">
<p class="txt-theme">prova prova</p>
<p class="sub-txt-theme">prova prova</p>
</div>
</div>
<div class="single-theme" style="background-image: url('{% static 'images/image5.svg' %}')">
<div class="cont-txt-theme">
<p class="txt-theme">prova prova</p>
<p class="sub-txt-theme">prova prova</p>
</div>
</div>
CSS
.multi-themes {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 25px;
row-gap: 8px;
margin: 10px 0 auto 0;
}
.single-theme {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 390px;
background-color: #102a3a;
border-radius: 1em;
color: white;
}
@media (min-width: 320px) and (max-width: 768px) {
.multi-themes {
display: grid;
grid-template-columns: 1fr;
margin: 10px 0 auto 0;
}
}
.cont-txt-theme {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
height: 100%;
line-height: 35px;
text-align: center;
}
.txt-theme {
height: 90px;
font-size: 42px;
color: white;
text-shadow: 0 1px 5px rgba(0,.50);
font-family: 'Montserrat',sans-serif;
}
.sub-txt-theme {
color: white;
justify-content: flex-end;
font-size: 20px;
text-shadow: 0 1px 5px rgba(0,.50);
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)