css - 将图像定位在 div 的底部

Question

无论高度如何，我如何将图像定位在该部分的底部。我确实尝试了相对位置和绝对位置，但效果不佳。请原谅我的英语，我希望屏幕截图和实时 url 能更好地解释。

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

绝对定位

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

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

总结:

1. 嵌套的子元素应该定位在absolute
2. 根据需要调整偏移bottom属性值
3. 包含的父元素必须定位在相对(要求)

代码片段演示:

.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 */
}

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

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. 根据需要调整附加包含的height属性值

代码片段演示:

.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 */
}

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

CodePen Demonstration