html - 将 div 对齐到另一个 div 的底部

Question

我有一些 div float 在另一个 div 中，我想将它们对齐到底部。 这是 HTML:

<div class="magazinebookcase">        

    <div class="books">
    <a title="Mag1" style="height:286px;width:16px;" href="">
    </a>
    </div>
    <div class="books">
    <a title="Mag2" style="height:258px;width:48px;" href="">
    </a>
    </div>
    <div class="books">
    <a title="Mag3" style="height:252px;width:38px;" href="">
    </a>
    </div>
    <div class="books">
    <a title="Mag4" style="height:258px;width:50px;" href="">
    </a>
    </div>       
    <div class="books">
    <a title="Mag5" style="height:284px;width:14px;" href="">
    </a>
    </div>

    <div class="clearfix"></div>
</div>

还有 CSS:

.magazinebookcase {
width: 100%;
padding: 3px;
vertical-align:bottom;

} 

.magazinebookcase .clearfix {
clear:both;
}

.magazinebookcase .books {
text-align:center;
float:left;
position: relative;
vertical-align:bottom;
}

.magazinebookcase a {
border: 1px solid #000;
display: block;
word-break: break-all;
}

.magazinebookcase a:hover {
background-color: #ccc;
}

我尝试了很多方法，将位置从绝对位置更改为相对位置等等，但我做不到。有帮助吗？

Answer 1

您不应使用表格进行布局。但是垂直对齐功能非常强大。你可以这样做:

display: table-cell;
vertical-align: bottom;

我做了一个jsFiddle这演示了它是如何工作的。