如何解决将HTML元素与另一个没有绝对值的HTML元素的底部对齐
| 我有一个新问题。我需要在HTML元素中垂直对齐另一个元素的底部,但是我可以使用绝对值,一次是第二个元素可以具有不同的高度。 请看一下这个jsFiddle。 here0ѭ需要像这样在<h1>
的底部停留-工作。
我尝试了2英镑,但没有用。
我该怎么办?如果需要,我可以毫无问题地更改HTML结构。
编辑:对不起,但我认为我没有说清楚:我不能使用margin-top
或类似的词,因为H1
的font-size
是可变的。
再见
解决方法
您无需指定确切的without6ѭ偏移即可完成此操作: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>
, 这是JSFIDDLE上的更正代码
, 将控件插入到元素中并使用它,例如,更改上边距属性。
, vertical-align
不起作用,因为它仅在h1
以下的区域对齐。所以在这里:
div.content-block > a {
float: right;
text-decoration: none;
color: #0A27D5;
font-size: 8pt;
margin-left: 16px;
}
加ѭ12将其推低一点,例如
div.content-block > a {
float: right;
text-decoration: none;
color: #0A27D5;
font-size: 8pt;
margin-left: 16px;
margin-top: 15px;
}
, 也许这很好jsfiddle。希望它有帮助
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。