0

我有一些 div 漂浮在另一个 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;
}

我尝试了很多方法，将位置从绝对位置更改为亲戚和其他东西，但我无法正确地做到这一点。有什么帮助吗？

4

3 回答 3

1

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

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

我制作了一个jsFiddle来演示它是如何工作的。

于 2012-11-05T11:17:35.370 回答
0

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>
于 2012-11-05T11:05:04.840 回答
-3

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

于 2012-11-05T11:05:00.777 回答