1

説明に役立つjsFiddleを作成しました： http://jsfiddle.net/windthorst/BvgZK/

しかし、参考までに、ここに HTML を示します。

<header>
    <div id="titlebar">
        <div id="titlename">
            <h1>Title Name Here</h1>
        </div>
        <div id="titlemenu">
            <span>Item One</span><span>Item two</span>
        </div>
    </div>
</header>

内側の div (#titlename と #titlemenu) の両方にCSS タグfloat: leftを追加することで、それらを含む div (#titlebar) に正しく並べて配置できることがわかっています。理解するのに少し時間がかかりましたが、それで完了です。

私が疑問に思っているのは、フロートなしで jsFiddle で行う方法をなぜ配置するのですか? 最初の div にテキストがない場合 (<h1>ここでタグを削除)、2 番目の div は、その<span>中のテキストが含まれている div (#titlebar) の下部に沿って「置かれる」ように配置されます。どちらも含まれているdiv内に（私の推定では）「正しく」配置されています。

「なぜ」を気にして申し訳ありませんが、ここで実際に何が起こっているのかわからない場合、将来そのような問題との闘いを避ける方法に完全に困惑しています...

4

2 に答える 2

4

これvertical-alignは、インライン フォーマット コンテキスト内の要素の配置を制御するプロパティです。<div>テキストを追加するときに が下に移動する理由は、 のデフォルト値がvertical-alignインラインフォーマット コンテキストbaselineの要素用であり、基本的に要素が垂直位置を調整することを意味するためです。周囲のインライン レベル要素のテキストのベースラインに基づきます (たとえば、"Title Name Here" のベースライン)。たとえば、デフォルト値を次のように変更して、周囲のインライン レベル要素の上部に揃えることができます。これはもう少し直感的です。のより良い説明については、この以前の回答を見ると役立つ場合がありますtopbaseline価値 - 最初は頭を包み込むのが少し難しいかもしれません

http://jsfiddle.net/BvgZK/1/

于 2013-08-19T14:45:29.147 に答える
1

デフォルトでは、両方のインライン ブロックのテキストは、テキストの共通のベースラインに沿って垂直方向に配置されます。

に申し込むvertical-align: topと#titlename、より良い結果が得られる可能性があります。

参照: http://jsfiddle.net/audetwebdesign/BvgZK/2/

于 2013-08-19T14:46:32.760 に答える