将父div块对齐到底部

Question

考虑以下HTML：

<div style="height:250px; background-color: aqua;">
    <div id="i">
        Some text
    </div>
</div>

和css-styles：

#i{
    position:relative;
    font-style:italic;
    color: navy;
    text-align:right;
    bottom:0;
}

JSFIDDLE。我预计div#i将位于右下角。为什么它不是真的以及如何解决这个问题？

Answer 1

将position更改为absolute

<div style="height:250px; background-color: aqua;position:relative">
    <div id="i">
        Some text
    </div>
</div>

#i{
    position:absolute;
    font-style:italic;
    color: navy;
    right:0;
    bottom:0;
}

FIDDLE

Answer 2

您必须在父div上设置相对定位，然后在子项上设置绝对定位（以及将底部和右侧设置为零）。

<强> jsFiddle example

<div style="height:250px; background-color: aqua;position:relative;">
    <div id="i">
        Some text
    </div>
</div>

#i{
    position:absolute;
    font-style:italic;
    color: navy;
    bottom:0;
    right:0;
}

Answer 3

使用display: table，display: table-cell和vertical-align: bottom。

无需绝对定位。

HTML

<div id="h">
    <div id="i">
        Some text
    </div>
</div>

CSS

#h
{
    display: table;
    width: 100%;
    height: 250px;
    background-color: aqua;
}

#i
{
    display: table-cell;
    vertical-align: bottom;
    text-align: right;
    font-style: italic;
    color: navy;
}

的 See working jsFiddle demo 的