Question

我需要将子脚div作为页脚保留在子框div的底部。这是jsfiddle

<div class="parentbox">
    <div class="childbox">
        <div id="subfooter">
        keep on bottom of box
        </div>
    </div>


</div>
<style>
.parentbox {
    width:500px;
    height:400px;
    border-style:solid;

    text-align: center;  /* align the inline(-block) elements horizontally */
}

.parentbox:before {      /* create a full-height inline block pseudo-element */
    content: ' ';
    display: inline-block;
    vertical-align: middle; /* vertical alignment of the inline element */
    height: 100%;
}

.childbox {
    display: inline-block;
    vertical-align: middle;          /* vertical alignment of the inline element */
    padding: 5px;
    border: 2px solid black;
    height:40%
}
</style>

还需要保持文字“保持在框的底部”。垂直对齐

Answer 1

尝试这个jsfilddle我假设你想做的事情

<强> HTML

<div class="parentbox">
<div class="childbox">
    <div id="subfooter">
    <div class = "footer">
    keep on bottom of box
    </div>
    </div>
</div>

<强> CSS

    .parentbox {
    width:500px;
    height:400px;
    border-style:solid;

    text-align: center;  /* align the inline(-block) elements horizontally */
}

.parentbox:before {      /* create a full-height inline block pseudo-element */
    content: ' ';
    display: inline-block;
    vertical-align: middle; /* vertical alignment of the inline element */
    height: 100%;
}

.childbox {
    display: inline-block;
    vertical-align: middle;          /* vertical alignment of the inline element */
    padding: 5px;
    border: 2px solid black;
    height:40%
}
.footer {
    padding-top: 145px;
}

https://jsfiddle.net/2L6yjckz/

Answer 2

只需尝试一次。

<强> HTML

<div class="parentbox">
    <div class="childbox">
        <div id="subfooter">
        keep on bottom of box
        </div>
    </div>


</div>

<强> CSS

.parentbox {
    width: 500px;
    height: 400px;
    border-style: solid;
    text-align: center;
    position: relative;
}

.parentbox:before {      /* create a full-height inline block pseudo-element */
    content: ' ';
    display: inline-block;
    vertical-align: middle; /* vertical alignment of the inline element */
    height: 100%;
}

.childbox {
    display: inline-block;
    vertical-align: middle;
    padding: 5px;
    border: 2px solid black;
    position: absolute;
    bottom: 5px;
    left: 12% !important;
}

Answer 3

我试过了，this会与你想要的东西接近吗？

我已完成的所有内容已添加

position: absolute;

到.parentbox和

position: absolute; bottom: 0;

到.childbox

希望这有帮助。

将子div保留在div框的底部

3 个答案: