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

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/

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

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>

Answer 2

    #left, #right {
        position: fixed;
        bottom: 0;
    }
   #left {
        left: 0
        }
    #right {
        right: 0;
    }

您可以根据需要将position:fixed用于此或position: absolute