0

HTML (3x 回):

<div class="scream">
  <div class="author">
    <img src="avatars/dagrevis.png" alt="" title="daGrevis" />
  </div>
  <div class="data">
    <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</span>
  </div>
  <div class="clearer"></div>
</div>

CSS:

.scream {
  background: #F4F4F4;
  width: 944px; height: 48px;
}

.scream .author {
  float: left;
}

.scream .data {
  float: left;
}

.clearer { clear: both; }

これは私のブラウザでどのように見えるかです:

私の状況。

ご覧のとおり、height48pxに設定されています。画像サイズも48pxです。div.screamそれぞれが別々の行に表示されないのはどうしてですか? heightたとえば、50pxに設定すると、すべてが機能します。私の意見では、私の人生を台無しにするある種のボーダー/アウトライン/マージン/パディングがあるためです. 残念ながら、FireBug ではそのようなものは見られません...

4

2 に答える 2

5

ここに画像の説明を入力

デフォルトでは、画像の下端はライン ボックスのベースライン (灰色の線) に揃えられます。ベースラインより下のスペース (「ディセンダー スペース」とも呼ばれます) が問題の原因です。詳細については、Eric Meyer によるこの記事を参照してください。

これを修正するには、次のルールを追加します。

.scream .author img {
    display: block;
}

またはこれ：

.scream .author img {
    vertical-align: bottom;
}
于 2011-06-18T22:29:52.173 に答える
0

DOMインスペクターを少し.author試してみると、52px程度の高さで出てきていることがわかります。余分な4pxはから来ているようline-heightです。0に設定line-height：

.scream .author {
    float: left;
    line-height: 0;
}

レイアウトを修正します：http：//jsfiddle.net/ambiguous/8KzdD/

または、画像を左にフロートさせることもできます。

.scream .author {
    float: left;
}
.scream .author img {
    float: left;
}

これにより、ローカルフローから画像が削除され、line-height無関係になります：http: //jsfiddle.net/ambiguous/8KzdD/1/

さらに別のオプションは、クリアリングを捨ててアウター<div>で使用することです：overflow:hidden<div>

.scream {
    background: #F4F4F4;
    width: 944px;
    height: 48px;
    overflow: hidden;
}

これにより<div class="author">、の高さは52ピクセルのままになりますが、効果は視覚的に目立たなくなります：http: //jsfiddle.net/ambiguous/8KzdD/2/

于 2011-06-18T22:15:46.823 に答える