对齐两个div,一个位于第三个div底部的顶部

Question

我有这个代码:

<div id="container">
    <div id="1"> div 1</div>
    <div id="2"> div 2</div>
</div>

无论高度多高,我都想放在div 1顶部和div 2底部.我怎么能这样做？containercontainer

Answer 1

将容器的位置设置为relative,并将div的1和2的位置设置为absolute.然后将div 1设置为top:0并将div 2设置为bottom 0(同时避免使用仅限ID的ID来兼容CSS):

jsFiddle例子

#container {
    position:relative;
    height:100px;
    width:100px;
    border:1px solid #999;
}
#div1, #div2 {
    position:absolute;
}
#div1 {
    top:0
}
#div2 {
    bottom:0;
}

Answer 2

这样的结果可以通过使用来实现flex properties。不论的高度多么高container，两个divs始终始终在顶部，另一个在底部。

#container {
    display: flex;
    justify-content:space-between;
    flex-direction:column;
    background-color: lightgrey;
}

#id{
    background-color: cornflowerblue;
    width: 100px;
    margin: 10px;
}