为什么我的职位绝对不起作用？

Question

我正试着在我的网站上做这个组件。我想在左边有一些文字，右边有一张图片。它应该调整到文本大小，必须始终在底部。我认为这是可能的位置:绝对和底部: 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>

​

Answer 2

如果我正确理解，这就是你想要的：https://jsfiddle.net/n1a70o1e/

你要做的就是做两块硬币。一个包含内容，另一个包含图像。为了使它们看起来相邻，给它们一个49%和50%的宽度(50-50只是稍微宽一点)。使用display: inline-block来实现这一点。它会让你们的div出现在彼此的旁边。然后，您必须使用左或右的float属性。

把你的图像放在容器中，就像你做的那样。容器将与其父容器、与文本相同的父容器一起调整大小。然后使用图像上的max-height来调整容器的大小。

Answer 3

删除.b-映像中的所有样式，并将其添加到..over映像中

.over-image{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
}