如何垂直对齐容器中的底部内联块元素[重复]答案

【问题标题】：how to vertical align bottom inline block elements in container [duplicate]如何垂直对齐容器中的底部内联块元素[重复]
【发布时间】：2016-05-07 00:29:30
【问题描述】：

我有以下html结构

<div class="examples">
   <div class="option"></div>
   <div class="option"></div>
   <div class="option"></div>
</div>

CSS：

.examples {
    whitespace: nowrap;
    min-height: 400px;
}
.option {
    width: 18%;
    max-width: 18%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 1%;
    vertical-align: bottom;
    cursor: pointer;
    border: 4px solid red;
    display: inline-block;
}

如何使用 CSS 垂直对齐容器底部的内联块（选项）（示例）？这些是示例容器内的一行图像。我尝试了垂直对齐：底部，但这不起作用，由于缺乏跨浏览器支持，我想远离 flex。我也想远离绝对位置，因为元素（选项）是一排图像。

【问题讨论】：

没有弹性盒或绝对定位......你不能。但是，我有点不清楚您要做什么。为什么这些“图像行”需要在 div 的底部？它们上面是什么？

标签： css

【解决方案1】：

您可能希望在容器 div 上使用 flexbox 和 display: flex; justify-content: flex-end;。那应该把它们放在底部。

【讨论】：

【解决方案2】：

.examples {
    whitespace: nowrap;
    min-height: 400px;

  position: relative;
  background: blue;
}

.aligner {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.option {
    width: 18%;
    max-width: 18%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 1%;
    cursor: pointer;
    border: 4px solid red;
    display: inline-block;
}

<div class="examples">
  <div class="aligner">
    <div class="option"></div>
    <div class="option"></div>
    <div class="option"></div>
  </div>
</div>

【讨论】：