css - CSS：如何在底部显示一个div中的多个div的单个div

Question

如果我有一个看起来像一个大正方形的 div，以及在该 div 中显示值的子 div，我如何让其中一个 div 显示在底部，而不管其他 div 在顶部占用的空间如何。希望这是有道理的......

例如，这是一个小提琴......我希望孩子 3 不是父 div 中的类似元素之一，只是底部的注释。小提琴示例

html:

<div id='parent'>

    <div id='child1' class='each-element'>Child 1</div>
    <div id='child2' class='each-element'>Child 2</div>
    <div id='child3' class='each-element'>Child 3</div>
</div>

css

#parent{
    min-height:300px;
    max-height:310px;
    height:300px;
    background-color:#e0e0e0;
    width:400px;
    padding:1%;
}

div.each-element{
    border:2px solid #2d2d2d;
    text-align:center;
    font-family:'segoe ui';
    margin:2%;
    padding:1%;
}

#child3{
    padding:0;
    border:none;
    margin:0

}

Answer 1

基本上，您将父 div 上的位置设置为相对，然后将子 3 div 上的位置设置为绝对。然后还在子 3 div 上将底部设置为零，宽度设置为 100%，如：

jsFiddle 示例

#parent {
    min-height:300px;
    max-height:310px;
    height:300px;
    background-color:#e0e0e0;
    width:400px;
    padding:1%;
    position:relative;
}
div.each-element {
    border:2px solid #2d2d2d;
    text-align:center;
    font-family:'segoe ui';
    margin:2%;
    padding:1%;
}
#child3 {
    padding:0;
    border:none;
    margin:0;
    bottom:0;
    position:absolute;
    width:100%;
}

Answer 2

您是否希望将子 3 div 固定到父 div 的底部？

#parent{
   position: relative;
}

#child3{
   bottom: 0;
   position: absolute;
}