我正在尝试创建一个页面,其中图像 1 在顶部,文本在底部,图像 2 在底部,文本在顶部。我不确定如何着手这样做。
在我的 JSFIDDLE 中,我希望“文本 1”位于底部。顶部是“文本 2”,底部是“文本 3”。
我的html
<div class="gallery_wrapper">
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/QuLaaLb.jpg">
</div>
<div class="gallery_title">
<h2>
Text 1
</h2>
</div>
</div>
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/vFEg6ef.jpg">
</div>
<div class="gallery_title">
<h2>
Text 2
</h2>
</div>
</div>
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/QuLaaLb.jpg">
</div>
<div class="gallery_title">
<h2>
Text 3
</h2>
</div>
</div>
最佳答案
这应该可以帮助您入门。您可以使用 flex 和伪属性来实现这一点。
.gallery_wrapper {
display: flex;
}
.gallery {
background: #333333;
}
.gallery:nth-child(even) {
display: flex;
flex-direction: column-reverse;
}
.gallery_title {
color: #fff
}
<div class="gallery_wrapper">
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/vFEg6ef.jpg">
</div>
<div class="gallery_title">
<h2>
Text 1
</h2>
</div>
</div>
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/vFEg6ef.jpg">
</div>
<div class="gallery_title">
<h2>
Text 2
</h2>
</div>
</div>
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/vFEg6ef.jpg">
</div>
<div class="gallery_title">
<h2>
Text 3
</h2>
</div>
</div>
</div>
关于css - 获取替代列以在CSS中将文本置于顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45810763/