html - 如何对齐 div?
问题描述
我有三个要对齐的图像display: flex
,我看到这些 div 相互干扰,我只是不能让它们与另一个并排,所以这些 div 重叠。我做了一个 JSFiddle 在这里更好地解释它。
.top-section-hover {
display: flex;
padding-top: 10em;
justify-content: center;
flex-grow: 2;
text-align: center;
text-transform: uppercase;
font-weight: bold;
max-width: 96%;
}
.top-section-hover img {
position: relative;
top: 0;
transition: top ease 0.5s;
left: 0;
}
.top-section-hover img.active {
top: -30px;
transition: all 0.5s ease;
}
.cover-title {
font-weight: bold;
}
.top-section-hover span.active2 {
color: white;
border-bottom: 3px solid white;
transition: 0.5s all;
}
<div class="top-section-hover">
<span class="hover-cover-left">
<a href="#" class="cover-left-content">
<img src="https://www.4metri.lv/upload/iblock/95c/95c14a70011a4c90c37656d71c1c7f43.png" alt="" class="cover-img">
<span class="cover-title">Birojam</span>
</a>
</span>
<span class="hover-cover-middle">
<a href="#" class="cover-left-content">
<img src="https://www.4metri.lv/upload/iblock/28e/28e0b8c52db48dd56e0c0bfcccb445ff.png" alt="" class="cover-img">
<span class="cover-title">Mājai</span>
</a>
</span>
<span class="hover-cover-right">
<a href="#" class="cover-left-content">
<img src="http://4metri.lan/public/..\resources\images\4metribildelabi.png" alt="" class="cover-img">
<span class="cover-title">Pasākumiem</span>
</a>
</span>
</div>
</div>
这是理想的状态,它们并排排列
解决方案
你是这样的吗?
.top-section-hover {
display: flex;
padding-top: 10em;
justify-content: space-around;
flex-grow: 2;
text-align: center;
text-transform: uppercase;
font-weight: bold;
max-width: 96%;
}
.top-section-hover img {
position: relative;
top: 0;
transition: top ease 0.5s;
left: 0;
width: 100%;
height: 100px;
}
.top-section-hover img.active {
top: -30px;
transition: all 0.5s ease;
}
.cover-title {
font-weight: bold;
}
.top-section-hover span.active2 {
color: white;
border-bottom: 3px solid white;
transition: 0.5s all;
}
<div class="top-section-hover">
<span class="hover-cover-left">
<a href="#" class="cover-left-content">
<img src="https://www.4metri.lv/upload/iblock/95c/95c14a70011a4c90c37656d71c1c7f43.png" alt="" class="cover-img">
<span class="cover-title">Birojam</span>
</a>
</span>
<span class="hover-cover-middle">
<a href="#" class="cover-left-content">
<img src="https://www.4metri.lv/upload/iblock/28e/28e0b8c52db48dd56e0c0bfcccb445ff.png" alt="" class="cover-img">
<span class="cover-title">Mājai</span>
</a>
</span>
<span class="hover-cover-right">
<a href="#" class="cover-left-content">
<img src="https://www.4metri.lv/upload/iblock/95c/95c14a70011a4c90c37656d71c1c7f43.png" alt="" class="cover-img">
<span class="cover-title">Pasākumiem</span>
</a>
</span>
</div>
推荐阅读
- google-cloud-platform - 我应该如何更改查询以便对 BigQuery 中数组的每条记录应用函数?
- python - 为什么pywt小波变换的输出是复数数组?
- java - 如何在 Atlas 中使用标签过滤
- shopify - 在 Shopify 产品描述中隐藏文本
- gem5 - 无法在 Gem5 核心转储问题上运行 SpectreSafeInvisibleSpec 方案
- linux - 如何从 tar.gz 中仅提取所需的文件?
- operating-system - 内页表缺页是否会产生缺页?
- c - 用平行边改变字符串位置中的字符值,例如 yuv = vuy
- android - 如何在 Cloud Firestore 中使用文档 ID 执行集合组查询
- kotlin - 从 kotlin 中另一个列表中的对象更新列表中的对象