在css中获取可选列以使文本位于顶部

我试图创建一个页面，上面有图像1，底部有文本，底部有图像2，顶部有文本。我不知道怎样才能这样做

在我的JSFIDLE中，我希望“文本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>

文本1
文本2
文本3

---

这应该有助于您开始。您可以使用flex和伪属性来实现这一点

.gallery\u包装器{
显示器：flex；
}
.画廊{
背景:#333333；
}
.画廊：第n个孩子（偶数）{
显示器：flex；
弯曲方向：柱反向；
}
.画廊名称{
颜色：#fff
}

文本1
文本2
文本3

您可以根据需要使用

flexbox

。 在

flexbox

中，有两个属性可用于解决问题。使用

顺序

或使用

弹性方向

。但是

flex direction

适用于

parent

，

order

适用于child。因此，您可以使用任何属性来解决您的问题

在这个示例代码段中，我使用了

顺序

.item{
显示器：flex；
弯曲方向：立柱；
}
.文本{
字体大小：20px；
}
.形象{
显示器：flex；
宽度：200px；
高度：200px；
背景图像：url（'https://files.allaboutbirds.net/wp-content/themes/html5blank-stable/images/blue-winged-warbler.jpg');
背景尺寸：封面；
背景重复：无重复；
}
.项目：第n个子项（2n）.文本{
顺序：2；
}

文本1
文本2
文本3

您可以添加以下

CSS

来实现这一点

.gallery{
  position: relative;
}
.gallery_title{
  position: absolute;
  bottom: 5px;
  left: 0;
}
.gallery:nth-child(even) .gallery_title{
  bottom: auto;
  top: 5px;
}

---

检查此处的链接

您是否可以提供css以便我们可以查看它。我喜欢使用无序列表执行此操作，然后您可以使用：n子（奇数）伪选择器。在要更改的每个h2中，将页边距底部/页边距顶部设置为0。将第一个h2标记置于第一个div.gallery-image标记之上