将 HTML 元素与另一个 HTML 元素的底部对齐，不使用绝对值

Question

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

请看一下这个jsFiddle。

需要保持在

的底部，如 这里 - 解决办法。

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

我怎样才能做到呢？如果需要，我可以毫无问题地更改 HTML 结构。

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

再见。

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>

Answer 2

这是 JSFIDDLE 上更正的代码

Answer 3

将控件插入元素并使用它，例如更改 margin-top 属性。

Answer 4

vertical-align 不起作用，因为它仅在其区域内对齐自身，该区域位于 h1 下方。因此，在这里：

div.content-block > a {
float: right;
text-decoration: none;
color: #0A27D5;
font-size: 8pt;
margin-left: 16px;
}

添加 margin-top: 将其稍微向下推，例如

div.content-block > a {
float: right;
text-decoration: none;
color: #0A27D5;
font-size: 8pt;
margin-left: 16px;
margin-top: 15px;
}

Answer 5

也许这很好jsfiddle。希望它有帮助