html - 为什么我的位置绝对不起作用？

Question

我正在尝试在我的网站上制作这个组件。我想在左边有一些文字，在右边有图片。它应该根据文本大小进行调整，并且必须始终位于底部。我认为这可以通过 position: absolute 和 bottom: 0 实现。但它不起作用。它总是在我所在行的顶部，我不知道为什么。

.b-image {
  position: absolute;
  bottom: 0;
}

.over-image {
  position: relative;
}

.content-width {
  max-width: 1440px;
  min-width: 300px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

section {
  padding: 48px 0;
  border-bottom: 1px solid #0000ff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section>
  <div class="row">
    <div class="content-width">
      <div class="content col-md-6">
        <h1>
          Headline
        </h1>
        <p>
          foo foo foo foo foo foo foo foo foo foo foo foo foo foo
        </p>
      </div>
      <div class="col-md-6 over-image">
        <img class="b-image" src="http://placehold.it/100x100" alt="">
      </div>
    </div>
  </div>
</section>

Answer 1

您可以使用 flex 实现这一点。删除 position: absolute 并将 display: flex; 给 .content-width 和 align-self: flex-end; 到 .over-image

.over-image{
    position: relative;
    align-self: flex-end;
}
.content-width {
    max-width: 1440px;
    min-width: 300px;
    margin:    0 auto;
    padding:   0 24px;
    position:  relative;
    display: flex;

}

section {
    padding: 48px 0;
    border-bottom: 1px solid $primary-color-10;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <section>
    <div class="row">
          <div class="content-width">
            <div class="content col-md-6">
                <h1>
                  Headline
                </h1>
                <p>
                foo foo foo foo foo foo foo foo foo foo foo foo foo foo
                </p>
                <h1>
                  Headline
                </h1>
                <p>
                foo foo foo foo foo foo foo foo foo foo foo foo foo foo
                </p>
                <h1>
                  Headline
                </h1>
                <p>
                foo foo foo foo foo foo foo foo foo foo foo foo foo foo
                </p>
            </div>
            <div class="col-md-6 over-image">
              <img class="b-image" src="http://placehold.it/200x200" alt="">
            </div>
        </div>
    </div>
</section>