Question

我有一些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，演示了它是如何运作的。

Answer 2

CSS应该是这样的：

.left {
    display:block;
    position:relative;
    height:200px;
    float:left;
}

.bottom {
    position:absolute;
    bottom:0;
}

.clear {
    clear:both;
}

HTML

<div class="left">
    <div class="bottom"></div>
</div>
<div class="left">
</div>
<div class="clear"></div>

Answer 3

改用表格。这是我的建议。在每个td上使用valign：bottom。

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

3 个答案: