css - DIV は奇数位置にジャンプします

Question

私はその理由を理解しようとしています

この例の 4 番目の DIV では:

http://jsfiddle.net/WarrickF/884Q9/

コンテンツには次のものを使用しました。

<div class="xxx1">xxx</div><div class="xxx2">yyy</div>

この DIV が他の DIV と一致しなくなったのはなぜですか?

Answer 1

display: inline-block;コンテンツがない場合、面白い効果が得られます。それはvertical-align財産と関係があります。

インライン ブロック div にコンテンツ (またはこの場合はフローティング コンテンツ) がない場合、テキスト コンテンツを含むインライン ブロック要素の既定値ではvertical-align: baseline;なく、それが画像であり、vertical-align の既定値であると想定しているようです。vertical-align: bottom;

vertical-align: bottom;これは、プレーヤー クラスに追加することで簡単に修正できます。