将图像放在div的底部

Question

无论高度如何，如何将图像定位在剖面的底部。我确实尝试了相对和绝对的位置，但它并没有顺利。请原谅我的英文，我希望截图和实时网址能更好地解释。

https://codepen.io/anon/pen/VrxdKe

HTML

  <section class="green fifty">
    <div class="inner-content">
      <h1>
    Test Test Test
    </h1>
      <img src="http://www.quanmax.com/site/wp-content/uploads/2017/06/test.png" />
    </div>
  </section>
  <section class="blue fifty">
    <div class="inner-content">
      <h1>
    Test Test Test
    </h1>
      <img src="http://www.quanmax.com/site/wp-content/uploads/2017/06/test.png" />
    </div>
  </section>

CSS

  .green {
    background: green;
  }

  .blue {
    background: blue;
  }

  .fifty {
    height: 50vh;
    max-width: none;
    width: 100%;
    display: table;
  }

  .inner-content {
    padding:20px 20px 0px 20px;
    display: table-cell;
  }

更好地解释屏幕截图：http://prntscr.com/he3jxl

由于

Answer 1

absolute定位

在嵌套的absolute元素上使用img定位。

/* Additional */
.inner-content img {
    position: absolute;
    bottom: 0; /* adjust to suit requirements */
}

摘要：

1. 嵌套的子元素应位于absolute
2. 根据要求调整偏移bottom属性值
3. 包含的父元素必须位于relative （要求）

代码段示范：

＆＃13;
＆＃13;
.green {
        background: green;
      }

      .blue {
        background: blue;
      }

      .fifty {
        height: 100vh; /* adjusted for the sake of demonstration */
        max-width: none;
        width: 100%;
        display: table;
      }

      .inner-content {
        padding:20px 20px 0px 20px;
        display: table-cell;
        position: relative; /* additional (required) */
      }

/* Additional */
.inner-content img {
    position: absolute;
    bottom: 0; /* adjust to suit requirements */
}
＆＃13;
<section class="green fifty" style="height: 200vh;">
  <div class="inner-content">
    <h1>
    The sibling image is positioned <code>absolute</code>
    </h1>
    <img src="http://www.quanmax.com/site/wp-content/uploads/2017/06/test.png" />
  </div>
</section>
<section class="blue fifty">
  <div class="inner-content">
    <h1>
    The sibling image is positioned <code>absolute</code>
    </h1>
    <img src="http://www.quanmax.com/site/wp-content/uploads/2017/06/test.png" />
  </div>
</section>
＆＃13;
＆＃13;
＆＃13;

CodePen Demonstration

table-cell显示其他包含元素

在其他嵌套元素包装table-cell上使用img显示。

/* Additional */
.inner-content_cell {
    display: table-cell;
    vertical-align: bottom;
    height: 100vh; /* adjust to suit requirements */
}

摘要：

1. 在包含元素中换行img并显示table-cell
2. 根据要求调整附加的高度属性值

代码段示范：

＆＃13;
＆＃13;
.green {
        background: green;
      }

      .blue {
        background: blue;
      }

      .fifty {
        height: 100vh; /* adjusted for demonstration */
        max-width: none;
        width: 100%;
        display: table;
      }

      .inner-content {
        padding:20px 20px 0px 20px;
        display: table-cell;
      }

/* Additional */
.inner-content_cell {
    display: table-cell;
    vertical-align: bottom;
    height: 100vh; /* adjust to suit requirements */
}
＆＃13;
<section class="green fifty">
  <div class="inner-content">
  <h1>
  The sibling element is displayed <code>table-cell</code>
  </h1>
   <div class="inner-content_cell">
    <img src="http://www.quanmax.com/site/wp-content/uploads/2017/06/test.png" />
    </div>
  </div>
</section>
<section class="blue fifty">
  <div class="inner-content">
    <h1>
    The sibling element is displayed <code>table-cell</code>
    </h1>
    <div class="inner-content_cell">
      <img src="http://www.quanmax.com/site/wp-content/uploads/2017/06/test.png" />
    </div>
  </div>
</section>
＆＃13;
＆＃13;
＆＃13;

CodePen Demonstration

Answer 2

以下代码使用了position relative＆amp;绝对。 无论高度如何，它都能正常工作。

＆＃13;

＆＃13;

.green {
  background: green;
}

.blue {
  background: blue;
}

.fifty {
  height: 400px;
  max-width: none;
  width: 100%;
  display: table;
}

.inner-content {
  padding: 20px 20px 0px 20px;
  display: table-cell;
  position: relative;
}

.inner-content img {
  position: absolute;
  bottom: 0;
}

＆＃13;

<section class="green fifty">
  <div class="inner-content">
    <h1>
      Test Test Test
    </h1>
    <img src="http://www.quanmax.com/site/wp-content/uploads/2017/06/test.png" />
  </div>
</section>
<section class="blue fifty">
  <div class="inner-content">
    <h1>
      Test Test Test
    </h1>
    <img src="http://www.quanmax.com/site/wp-content/uploads/2017/06/test.png" />
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

有关解释的任何进一步细节。随时发表评论。