2

フォントサイズが異なる3つのスパンがあり、divフロートが異なるでラップされています。

を調整してこれらspansを正しく位置合わせしようとしましたが、最後のフローティングがこのメソッドでコンテナをオーバーフローしているline-heightため、少しハッキーに思えます。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;
}

または絶対的なポジショニングですが、要素の流れを変更せずに、最後のスパンをラッパーのベースライン（上部ではなく）に揃える可能性があるかどうかを知りたいですか？

4

2 に答える 2

3

padding-topスパンにスペースを追加し.timeCreatedます-フォントサイズの違い（4px）

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

そしてjsFiddle

于 2013-03-26T18:01:06.290 に答える
2

これがどれほどきれいかはわかりませんが、機能します。位置を決めただけです。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;
}
于 2013-03-26T17:52:58.210 に答える