css - 获取替代列以在CSS中将文本置于顶部

Question

我正在尝试创建一个页面，其中图像 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>

JSFIDDLE

Answer 1

这应该可以帮助您入门。您可以使用 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>