html - 无法将 div 定位在另一个 div 的底部

Question

我试图将 div 放在另一个 div 的底部但无法做到这一点

        <div class="div">
            <img src="dual.png"/>
            <h1>Boot From a CD or USB Drive on Any PC</h1>
            <div>footers</div>
        </div>

CSS

.div{
        float:left;
        height:300px;
        width:22%;
        margin-top:15px;
        margin-left:15px;
        background-color: #e4f2ff
    }
    .div img{
        width:100%;
        height:180px;
    }
    .div h1{
        font-size:20px
    }
    .div div{
        background:red;
        float: bottom;
        position: absolute;
        bottom: 0;
    }

这里是

jsfiddle

尝试做这样的设计http://i.stack.imgur.com/CdGKY.png有人可以帮我如何将 div 定位在父 div 的底部吗？提前致谢

Answer 1

Display:table 可以帮助您:http://jsfiddle.net/j1raqvc8/4/

.div {
    float:left;
    height:300px;
    width:22%;
    margin-top:15px;
    margin-left:15px;
    background-color: #e4f2ff;
    display:table;
}
.div img {
    width:100%;
    height:180px;
}
.div h1 {
    font-size:20px;
    margin:0
}
.div div {
    background:red;
    display:table-footer-group;
}

<div class="div">
    <img src="dual.png" />
     <h1>Boot From a CD or USB Drive on Any PC</h1>
    <div>footers</div>
</div>

但如果内容需要更高，它会允许盒子增长到超过 300px http://jsfiddle.net/j1raqvc8/5/ .