CSS: Wie kann ich zwei Elemente am Boden

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/

ich eine Spanne Schwimmer verlassen haben müssen, schweben und die andere Spanne float rechts, beide ausgerichtet nach unten.

Answer 1

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

    #left { 
     left: 0 
     } 

    #right { 
     right: 0; 

    } 

Sie position:fixed für dieses oder position: absolute basierend auf Ihrer Anforderung können

Answer 2

Sie können dies tun, mit Flexbox, man muss nur gesetzt

1. justify-content: space-between Elemente zu positionieren, links und rechts
2. align-items: flex-end Elemente unten am übergeordneten Element positionieren.

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