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执行此操作，只需设置

即可

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

   #left {
        left: 0
        }

    #right {
        right: 0;

    }

您可以根据自己的要求使用position:fixed或position: absolute

CSS：如何在底部浮动2个元素

2 个答案: