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 上的位置设置为相对，然后将子 3div 上的位置设置为绝对值。然后也在子 3div 上将底部设置为零，宽度设置为 100%，如下所示：

js小提琴示例

#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

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

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