CSS：我怎样才能得到2个元素浮动底部

#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/CSS：我怎样才能得到2个元素浮动底部

我需要离开一个跨度浮动和其他跨度浮动权，既底端对齐。

来源

2017-01-10 totalitarian

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

    #left { 
     left: 0 
     } 

    #right { 
     right: 0; 

    }

您可以使用根据您的需要为这个或position: absoluteposition:fixed

来源

2017-01-10 16:03:14

注意'位置：fixed'将加盖项所述窗口的底部和不与非静态位置最接近的包含元素的底部（或身体，以先到者为准）。 –

是的，你是正确的谢谢..问题说底部，我认为视口的底部。 –

对不起，我的意思是容器的底部 – totalitarian

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

justify-content: space-between定位元素左，右
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>

来源

2017-01-10 16:05:29

CSS：我怎样才能得到2个元素浮动底部

回答

相关问题