html - 将 HTML 元素与另一个没有绝对值的 HTML 元素的底部对齐

Question

我有一个新问题。我需要在一个 HTML 元素中垂直对齐到另一个元素的底部，但我可以使用绝对值，一次第二个元素可以有不同的高度。

看看this jsFiddle请。

<a>需要留在<h1>的底部喜欢here - workarrounded .

我试过了 vertical-align但它不起作用。

我该怎么做？如果需要，我可以毫无问题地更改 HTML 结构。

编辑:抱歉，但我认为我没有留下明确的内容:我不能使用 margin-top或类似的，因为 font-size的 H1是可变的。

再见。

Answer 1

您无需像这样指定精确的 px 偏移量即可执行此操作:http://jsfiddle.net/Tu7bA/14/

相关的新 CSS:

.header-container {
    overflow: hidden;
    position: relative
}
.header-container > ul {
    position: absolute;
    bottom: 0; right: 0
}
.header-container ul > li {
    float: right;
    text-decoration: none;
    color: #0A27D5;
    font-size: 8pt;
    margin-left: 16px;
}
.header-container > h1.first {
    float: left;
    font-size: 26pt;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

HTML:

<div class="content-block">
    <div class="header-container">
        <h1 class="first">Lorem Ipsum</h1>
        <ul>
            <li><a href="./Edit">editar</a></li>
            <li><a href="./Attach">anexar</a></li>
        </ul>
    </div>
    <p>
        Lorem ipsum dolor sit amet..
    </p>
</div>