12

3 つの同一の div がインライン ブロックに配置されている場合、それらは完全に整列されます。ただし、いずれかの div にコンテンツを配置すると、他の div の下にドロップダウンします。なぜそれをするのですか？

<div class="left">?</div>
<div class="center"></div>
<div class="right"></div>

div {
    display:inline-block;
    margin-:2px;
    height:100px;
    width:25px;
    border:1px solid black;
}​

http://jsfiddle.net/7kkC6/

より良い例: http://jsfiddle.net/7kkC6/9/

4

1 に答える 1

41

これは、vertical-align がデフォルトでベースラインに設定されているためです。top に設定することで問題を解決できます:

div {
    display:inline-block;
    margin-:2px;
    height:100px;
    width:25px;
    border:1px solid black;
    vertical-align: top;
}​

ここのデモ: http://jsfiddle.net/7kkC6/4/

于 2012-11-15T01:37:46.773 に答える