Question

我有这段代码：

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

我想将div 1放在顶部，div 2放在container的底部，无论container的高度是多少。我怎么能这样做？

Answer 1

将容器的位置设置为相对位置，将div 1和2的位置设置为绝对位置。然后将div 1设置为top：0和div 2设置为bottom 0（同时避免使用仅限数字的ID＆＃39; s用于CSS兼容性）：

<强> jsFiddle example

#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的高度有多高，两个div都将始终位于顶部和顶部。另一个在底部。

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

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

Answer 3

您可以尝试以下代码：

Working Demo here

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

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

3 个答案: