[英]What is the “clean way” to align multiple floating spans with different font-sizes?
我有三个具有不同字体大小的跨度,它们被包装在具有不同浮点数的div
。
我试图通过调整line-height
正确对齐这些spans
,但是对我来说似乎有点不客气,因为最后一个浮动span
正在使用此方法溢出容器。
我试过vertical-align
没有运气。
那么,如果没有可能的话 ,将这些对齐的干净方法是什么?
这是jsFiddle ,这是代码:
<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>
.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
跨度中添加一些padding-top
空间-字体大小的差异(4px)
.timeCreated {
font-style: italic;
font-size: 12px;
color: #444;
float: right;
padding-top: 4px;
}
我不知道这有多干净,但是它可以工作,我只是给它一些位置。 的jsfiddle
.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;*/
position:relative;
}
.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;
position:absolute;
bottom:0px;
right:0px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.