27

奇妙な CSS の問題に遭遇しました。コンテンツを含むボックスが垂直方向に整列されていない理由を誰かが説明できますか?

class を使用してスパン内にテキストを配置すると、.divPutTextToFixIssue適切に配置されます。

http://jsfiddle.net/KgqJS/88/

   #divBottomHeader {
        background-color: #d5dbe0;
        height: 43px;
    }
    .divAccountPicker {
        display: inline-block;
        background: blue;            
        width: 200px;
        height: 40px;
    }
    .divAccountData {
        display: inline-block;
        background: red;
        width: 400px;
        height: 40px;
    }
<div id="divBottomHeader">
        <div class="divAccountPicker">
           <span class="divPutTextToFixIssue"></span>                 
        </div>
        <div class="divAccountData">
            <span>Balance: $555</span>
        </div>
    </div>

4

4 に答える 4

47

デフォルトvertical-align値baselineは

ボックスのベースラインを親ボックスのベースラインに揃えます

注:セレクターに追加vertical-align:baselineすることで、このデフォルト値の動作を確認できます。.divAccountDataデフォルトなのでbaseline、配置は変更されません。

topブロックを上部に揃えるには、次のように変更する必要があります。次に例を示します。

.divAccountData {
    display: inline-block;
    background: red;
    width: 400px;
    height: 40px;
    vertical-align: top;
}

ベースラインは次のように定義されます

ほとんどの文字が「位置」し、その下にディセンダーが伸びる線

テキストを追加すると問題が解決するように見える理由を説明すると、

「インライン ブロック」のベースラインは、通常のフローの最後のライン ボックスのベースラインです。この場合、ベースラインはマージンの下端です。

CSS2 ビジュアル フォーマット モデルの詳細から

したがって、1 文字だけ追加するとベースラインが変更され、2 番目のブロックが同じ垂直方向の配置で表示されます。これは、両方のブロックに同じ数の行が含まれている場合にのみ機能します。ブロックの 1 つにさらに単語を追加してみるとvertical-align:top、2 番目のブロックを強制しなくても、最初のブロックに存在するテキストの行数に応じて移動することがわかります。

編集:関連する質問が見つかりましたなぜこのインラインブロック要素が下にプッシュされるのですか?

于 2012-10-18T08:44:10.210 に答える
1

デモvertical-align: top;に追加する必要があります.divAccountPicker

于 2012-10-18T08:43:22.190 に答える
0

このようにクラスに追加vertical-align:topします.divAccountData, .divAccountPicker 

.divAccountData, .divAccountPicker {
    vertical-align: top;
}

ライブデモ

display:inline-block; ずっと慣れていたならvertical-align:top

于 2012-10-18T08:43:01.453 に答える
-1

これを試して

.divPutTextToFixIssue {
   display:inline-block;
 }

jsフィドル

于 2012-10-18T08:43:27.503 に答える