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

两个步骤：

提供外部div position: relative;
提供“Hello world”div position: absolute; bottom: 5px;

这是一个有效的示例，您清理了一些样式（我还没有改进格式）：http://jsfiddle.net/CqMqx/

Answer 2

垂直对齐仅适用于表格单元格的元素。有两种方法可以实现这一目标。第一个也是最明显的是使用表，尽管这不是最佳实践。

另一种方法是使用display: table-cell。 This Quirksmode article helps explain the different display attributes.

Answer 3

此示例可能对您有所帮助：

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

Answer 4

vertical-align属性用于文本（或图像，或其他任何内联）。为了让块级别的东西位于底部，我想你会给第一个div（向左浮动的那个）position relative，然后给出“hello world” “div下面的CSS：

position:absolute;
bottom:0;

你需要做更多的调整，但这是一般的想法。（我说“我认为”，因为我并没有真正使用ASP，并且上下文可能不适用于此解决方案。）

儿童div的vertical-align：bottom

4 个答案: