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>

Answer 2

以下是JSFIDDLE

上的更正代码

Answer 3

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

Answer 4

vertical-align不起作用，因为它只会在其区域内对齐，该区域低于h1。所以，在这里：

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

添加margin-top:<value>将其推下一点，比如说

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

Answer 5

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

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

5 个答案: