html - 如何在同一列的顶部和底部放置相同的图像？

Question

所以标题几乎解释了我的问题。现在，我将我的图像放在列的顶部，同时我需要它位于底部。我该怎么做？

My Codepen

HTML

<div class="content">
  <div class="row">
    <div class="col-md-10 first-column"></div>
    <div class="col-md-2 back-to-blog">
      <a href="/">
        <img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
      </a>
    </div>
    </div>
  </div>
</div>

CSS

.content {
  padding: 0 35px;
}

.first-column {
  border: 1px solid;
  height: 200px;
}

Answer 1

Flexbox 可以做到这一点:

.content {
  padding: 0 35px;
}
.row {
  display: flex; /* columns now equal height */
}
.first-column {
  border: 1px solid;
  height: 200px;
  flex: 10; /* replicates md-10 */
}
.back-to-blog {
  flex: 2; /* replicates md-2 */
  display: flex;
  flex-direction: column; /* sets directionality */
  justify-content: space-between; /* separates elements across direction */
}

a {
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
  <div class="row">
    <div class="col-md-10 first-column"></div>
    <div class="col-md-2 back-to-blog">
      <a href="/">
        <img class="img-responsive" src="http://lorempixel.com/image_output/abstract-q-c-25-25-3.jpg">
      </a>
      <a href="/">
        <img class="img-responsive" src="http://lorempixel.com/image_output/abstract-q-c-25-25-3.jpg">
      </a>
    </div>
  </div>
</div>
</div>