Question

如果我有一个看起来像一个大正方形的div，并且子div显示该div中的值，那么如何让其中一个div显示在底部，而不管其他人在顶部消耗的空间。希望有道理......

这是一个小提琴例如...我希望小孩3不是父div中的tile元素之一，只是底部类型的一个音符。 fiddle example

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上的位置设置为relative，然后将子3上的位置设置为absolute。然后还在子3 div上将底部设置为零，宽度设置为100％，如：

<强> jsFiddle example

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

CSS：如何在底部的div显示中制作多个div的单个div

2 个答案: