兒童div的vertical-align：bottom

Question

我試圖讓hello world div位於父div的底部，但沒有運氣。 有任何想法嗎？

<ItemTemplate>
    <div style="float: left; padding-right: 0px; width: 98%; width: 170px; height: 490px; overflow: auto; text-align: center; border: 1px solid Black; padding: 0px; margin: auto;">
        <div style="width: 98%; margin: auto; border-bottom: 1px dotted Black; padding: 1px;">
            <asp:Label ID="lblday" Text='<%# Bind("ShortDate") %>' runat="server"></asp:Label>
        </div>
        <div id="PanelDay" style="text-align: left; margin-top: 5px;" runat="server"></div>
        <div id="Div2" style="text-align: left; vertical-align:bottom; margin-top: 5px;" runat="server">
            hello world
        </div>
    </div>
</ItemTemplate>

Answer 1

兩個步驟：

1. 給你的外部div position: relative;
2. 給出“Hello world”div position: absolute; bottom: 5px; position: absolute; bottom: 5px;

這是一個工作示例，清理了一些樣式（我還沒有改進格式）： http ： //jsfiddle.net/CqMqx/

Answer 2

垂直對齊僅適用於表格單元格的元素。 有兩種方法可以實現這一目標。 第一個也是最明顯的是使用表，盡管這不是最佳實踐。

另一種方法是使用display: table-cell 。 這篇Quirksmode文章有助於解釋不同的顯示屬性。

Answer 3

此示例可能對您有所幫助：

#footer {
    bottom: -100px; 
    position: absolute; 
    text-align: left; 
    padding: 5px;
}

Answer 4

vertical-align屬性用於文本（或圖像，或其他任何內聯）。 為了讓塊級別的東西位於底部，我認為你將給第一個div（左邊的那個）一個relative的position ，然后給“hello world”div下面的CSS：

position:absolute;
bottom:0;

你需要做更多的調整，但這是一般的想法。 （我說“我認為”，因為我並沒有真正使用ASP，並且上下文可能不適用於此解決方案。）