CSS:如何让 2 个元素 float 在底部

Question

#container {
    border: 1px solid red;
}
#left, #right {
    vertical-align: bottom;
    display: inline-block;
}

#right {
    float: right;
}

<div id="container">
    <div id="left">
        left
    </div>
    <div id="right">right <br />right <br />right <br />right <br />right <br />right <br />right <br /></div>
</div>

http://jsfiddle.net/nxtbqqps/

我需要让一个 span 向左浮动，另一个向右浮动，两者都与底部对齐。

Answer 1

你可以用Flexbox来做到这一点，你只需要设置

1. justify-content: space-between 左右定位元素
2. align-items: flex-end 将元素定位在父元素的底部。

#container {
  border: 1px solid red;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 300px;
}

<div id="container">
  <div id="left">
    left
  </div>
  <div id="right">right
    <br />right
    <br />right
    <br />right
    <br />right
    <br />right
    <br />right
    <br />
  </div>
</div>