0

HTMLのインライン、インラインブロック、およびブロック表示オプションの違いを理解するのに問題があります。特にインラインブロックがどのように適合するか。ブロックアイテムは常に独自の行に表示されるようです。インラインアイテムは、幅と高さの設定をうまく処理できないようです。インラインブロックは2つが混在しているように見えますが、奇妙なレイアウト状況につながります。次に例を示します。

<style type="text/css">
#container {
    height: 100px;
    background: tan;
}

#container p {
    height: 100px;
    background: yellow;
    text-align: center;
    padding: 0px;
    margin: 0px;
    width: 29%;
    display: inline-block;
}

#container div:first-child {
    height: 100px;
    display: inline-block;
    width: 35%;
    padding: 0px;
    margin: 0px;
    border-top: 2px solid #888;
    border-right: 2px solid #888;
}

#container div:last-child {
    height: 100px;
    display: inline-block;
    width: 35%;
    padding: 0px;
    margin: 0px;
    border-left: 2px solid #888;
    border-bottom: 2px solid #888;
}
</style>
<body>
    <div id="container">
        <div class="decorator"></div>
        <p>A very long test paragraph like</p>
        <div class="decorator"></div>
    </div>
</body>

私の予想では、「p」要素と2つの「div」要素はすべて、高さ100pxの外側のdiv内でインラインになります。'p'要素が親divの下に表示される理由がわかりません。vertical-alignは影響を与えず、「height」を「line-height」に切り替えても影響はありません。誰かがここで何が起こっているのか説明できますか？

ありがとう！

4

2 に答える 2

5

指定されていない要素vertical-align（など p）は、に配置されbaselineます。あなた がそれpを持っているように設定した場合vertical-align:top、それはその親の上部に整列します（そしてそれによってあなたの例の他の要素）。

于 2012-11-26T15:07:18.273 に答える
1

まず最初に、あなたはinlineディスプレイとして使用しました。これは、空白が考慮されることを意味します。

ここを見てください：これはあなたの現在のレイアウトです。

そしてここに：これは空白のないレイアウトです、違いに気づきましたか？

この空白のために、場合によってはレイアウトが歪む可能性があります。

ここで<p>問題が発生します。デフォルトでは、段落要素のベースラインがその親要素のベースラインと位置合わせされることvertical-alignを意味するように設定されています。この問題を修正するbaselineスタイルを与えてください。vertical-align:top

于 2012-11-26T15:19:50.487 に答える