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

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

    #left { 
     left: 0 
     } 

    #right { 
     right: 0; 

    } 

您可以使用根據您的需要爲這個或position: absoluteposition:fixed

Answer 2

你可以用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>