web-dev-qa-db-ja.com

このインラインブロック要素に垂直方向に配置されていないコンテンツがあるのはなぜですか

奇妙なCSSの問題に出くわしました。コンテンツのあるボックスが垂直に配置されていない理由を誰かが説明できますか？

クラス.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>
htmlcssvertical-alignment
24
Anton Skovorodko

デフォルトの vertical-align 値はbaselineです。

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

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

ブロックを上部に配置するには、これをtopに変更する必要があります。次に例を示します。

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

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

ほとんどの文字が「座る」線とその下に子孫が伸びる線

whyに対処するには、テキストを追加すると問題が解決するようです。

'inline-block'のベースラインは、通常のフローの最後のラインボックスのベースラインです。ただし、インフローラインボックスがない場合、または 'overflow'プロパティに 'visible'以外の計算値がある場合を除きます。この場合、ベースラインは下マージンのエッジです。

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

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

編集：関連する質問が見つかりました なぜこのインラインブロック要素が下に押されているのですか？

43
andyb

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

1
xception

...............................こんにちは今追加vertical-align:topあなたの.divAccountData, .divAccountPickerclassこのように

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

ライブデモ

以前はdisplay:inline-block;いつもよりvertical-align:top

0
Rohit Azad