html - CSS 表示インライン ブロックの上部配置

Question

2 つの列に別々のボックスとして表示したい div がほとんどありません。

HTML:

<div class="short-desk">
   <p>BOX 1</p>
</div>

<div class="short-desk">
   <p>BOX 2</p>
</div>
...

CSS:

.short-desk {
    display: inline-block;
    width: 42%;
    height: 180px;
    border:1px solid #000;
}

結果：

css の diaplay:inline-block プロパティを使用しようとしましたが、配置に問題があります。1 つの行に 2 つのボックスが同じレベルにありません。

実際には小さな文字を入れても問題ないのですが、少し長い文字を入れるとレベルが変わって一致しなくなります。

ここでデモを参照してください：

http://jsfiddle.net/zur4ik/TUGup/1/

どうすればこれを修正できますか?

Answer 1

実際、あなたは誤って解決策を質問のタイトルに入れました。

このスタイルを定義に追加すると、意図した動作が得られるようです。

.short-desk {
    vertical-align:top;
}

これは更新された JSFiddleです。

これがあなたが探していたものではない場合はお知らせください。さらにサポートさせていただきます。

Answer 2

次のようにクラスに追加overflow:hidden;するだけです:-short-desk

.short-desk {
    display: inline-block;
    width: 42%;
    height: 180px;
    border:1px solid #000;
    overflow:hidden;           // Add this
}

フィドルリンク

Answer 3

font-size:0body に配置して div 間のスペースを削除overflow:hiddenし、box に配置します。

http://jsfiddle.net/TUGup/2/