將div對齊到其他div的底部

我有一些div在另一個div內浮動，我想將它們對齊到底部。這是HTML：將div對齊到其他div的底部

<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; 
}

我試過很多方法，改變從絕對親戚和其他東西的位置，但我不能做正確。任何幫助？

來源

2012-11-05 Ikzer

我們可以看到HTML嗎？... – sticksu

在這裏發佈您的完整代碼....... –

對不起，我錯誤地粘貼了它，並沒有顯示，它是固定的。 – Ikzer

你不應該使用表格佈局。但垂直對齊功能非常強大。你可以做這樣的事情：

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

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

來源

2012-11-05 11:17:35 Amberlamps

謝謝！這解決了我的問題^^ – Ikzer

-3

改爲使用表格。這是我的建議。在每個td使用valign：bottom。

來源

2012-11-05 11:05:00 anmarti

當您想要顯示錶格時使用表格，但就是這樣！ – Amberlamps

謝謝你的讚譽。 – anmarti

@Amberlamps border ='0' – anmarti

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-05 11:05:04

將div對齊到其他div的底部

回答

相關問題