Question

我有以下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，因为缺乏跨浏览器支持。我也想远离绝对位置，因为元素（选项）是一排图像。

Answer 1

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

Answer 2

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如何垂直对齐容器中的底部内联块元素

2 个答案: