我有这个代码
<div>
<div style="float:left">
<h2>header</h2>
</div>
<span style="float:right; vertical-align: bottom">
text2
</span>
<div class="clear:both"></div>
</div>
我无法将 text2
垂直对齐到父级 div
的底部。
怎么做?
最佳答案
这是相当奇怪的 HTML 代码,但这里有一个不改变 HTML 的解决方案:
(附言:您要求 span
应与父 DIV 的底部对齐,而不是与 h1
对齐。如果您想要后者,则必须给出它们都是相同的 margin-bottom
和 padding-bottom
。)
div:first-of-type {
position: relative;
overflow: hidden;
}
span {
display: block;
position: absolute;
right: 0;
bottom: 0;
}
<div>
<div style="float:left">
<h2>header</h2>
</div>
<span style="float:right; vertical-align: bottom">
text2
</span>
<div class="clear:both"></div>
</div>
关于html - 文本左对齐,另一个文本在同一行上以不同的高度右对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42396770/