gpt4 book ai didi

css - 什么是 "clean way"来对齐具有不同字体大小的多个 float 跨度?

转载 作者:太空宇宙 更新时间:2023-11-04 15:15:28 25 4
gpt4 key购买 nike

我有三个 具有不同字体大小 的 span,它们被包裹在一个具有不同 float 的 div 中。

我试图通过调整 line-height 来正确对齐这些 spans,但对我来说似乎有点老套,因为最后一个 float span 使用此方法使容器溢出。

我试过使用 vertical-align 但运气不好。

那么什么是干净的方式来对齐这些,而不需要黑客攻击(如果可能的话)?

这是 jsFiddle ,这是代码:

HTML

<div class="comTitle">
<span class="comUserName">admin</span>
<span class="comUserRank"> - Animator</span>
<span class="timeCreated">The 13/03/13 at 16:49</span>
</div>

CSS

.comTitle {
font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
/*line-height:22px;*/
}

.comUserName {
font-weight: bold;
font-size: 16px;
color: #444;
font-variant: small-caps;
clear:left;
}

.comUserRank {
font-size: 12px;
font-style: italic;
color: grey;
clear:left;
}

.timeCreated {
font-style: italic;
font-size: 12px;
color: #444;
float: right;
/*vertical-align:baseline;*/
/*line-height:26px;*/
}

[编辑] 我知道如何处理 position 属性,我可以使它与 :

对齐
.timeCreated {
...
float:right;
position: relative;
right: 0px;
bottom: -4px;
}

或绝对定位,但我想知道是否有可能在不改变元素流的情况下将最后一个跨度与包装器的基线(而不是顶部)对齐

最佳答案

.timeCreated span 中添加一些 padding-top 空间 - 字体大小的差异 (4px)

.timeCreated {
font-style: italic;
font-size: 12px;
color: #444;
float: right;
padding-top: 4px;
}

jsFiddle

关于css - 什么是 "clean way"来对齐具有不同字体大小的多个 float 跨度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15643863/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com