如何使行垂直对齐？

Question

如何使用当前标记将<img>元素与包含文本“Trump knock Mosul offensive”的元素垂直对齐到底部？

代码段

.beatthebottom {
  background-color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4">
      <div class="row">
        <div class="col-sm-12">
          <p>
            US election: 2 days to go
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            Emotions run high in final days of the campaign
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            Person yells 'gun' ... Trump whisked away
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            US election: 2 days to go
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            Reality Check: Whoppers of the campaign
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            World of troubles for next US president
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            Pope warns against walls ahead of election
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            Rudy Giuliani changes his story on FBI
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            Trump knocks Mosul offensive
          </p>
        </div>
      </div>

    </div>
    <div class="col-sm-8">
      <div class="row">
        <div class="col-sm-12">
          <p>
            'It's gone mad outside'
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p>
            'It's gone mad outside'
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12 beatthebottom">
          <img class="img-responsive" src="http://placehold.it/350x150">
        </div>
      </div>
    </div>
  </div>
</div>

CodePen

Answer 1

您可以使用flexbox执行此操作，步骤如下：

1。让您的父.row成为可以换行的弹性容器。这将使直接子项弹性项目。

2。将您的孩子.col-sm-8元素设为灵活容器，但列方向也是如此。

3。在包含.row的{​​{1}}元素中使用自动边距顶部。

＆＃13;

＆＃13;

<img>

＆＃13;

.beatthebottom {
  background-color: red;
}
.flex-container-1 {
  display: flex;
  flex-wrap: wrap;
}
.flex-container-2 {
  display: flex;
  flex-direction: column;
}
.margin-top-auto {
  margin-top: auto;
}

＆＃13;

＆＃13;

＆＃13;

<强> Revised CodePen

Answer 2

在容器的第一行结束后立即添加带有clearfix类的空div。 Clearfix清除浮动，因此浮动容器与顶部对齐，我认为你需要它。