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

【问题标题】：How to place the same image at the top and at the bottom of the same column?如何在同一列的顶部和底部放置相同的图像？
【发布时间】：2016-02-05 11:04:37
【问题描述】：

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

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;
}

【问题讨论】：

刚刚回答了这样 - stackoverflow.com/questions/35221068/… 但无论如何我都会添加一个答案。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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>

【讨论】：

那东西是合法的。你知道关于 flexbox 的好消息吗？我现在就想学。

【解决方案2】：

如果您想坚持使用 Bootstrap 列类，这是另一种方法：

HTML：

<div class="content">
  <div class="row">
    <div class="col-xs-2 col-sm-10 col-md-10 first-column">aaa</div>
    <div class="col-xs-2 col-sm-2 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>
      <a href="/" class="btm-link"><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;
}
.back-to-blog{
  height: 200px;
}
.btm-link{
  position: absolute;
  bottom: 0;
}

代码笔： http://codepen.io/anon/pen/xZyGoQ

【讨论】：

是的，但请注意，这需要您知道列的高度...您可能不知道。
@Paulie_D 你是对的。此解决方案可能适用于静态列高，但如果它是动态的，则弊大于利。