不斷格盒子的底部

Question

我需要保持子頁腳DIV上childbox div的底部孩子的div像footer.Here是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

希望這有助於。