CSS顯示內嵌塊頂部對齊

我有幾個div，我想在兩列中顯示爲單獨的框。CSS顯示內嵌塊頂部對齊

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; 
}

結果：

enter image description here

我嘗試使用css diaplay：inline-block屬性，但對齊時出現了一些問題：一行中的2個框不在同一級別。

其實他們工作正常，裏面的文字很小，但是當我放一點文字的時候，他們的關卡就會變化，並且不會相互匹配。

演示，請參閱：

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

我怎樣才能解決這個問題？

2013-07-17 zur4ik

其實，你在不經意間放置在你的問題的標題的解決方案。

添加這種風格自己的定義似乎給預期的行爲：

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

這裏是一個updated JSFiddle。

如果這不是你正在尋找的，請告訴我，我會很樂意進一步幫助！

2013-07-17 17:22:20 Serlite

它的工作原理！非常感謝！這正是我所需要的。 – zur4ik

太棒了！我很高興能幫助你。 – Serlite

將font-size:0放在身體上，並將overflow:hidden放在箱子上，以消除隔間之間的空間。

2013-07-17 17:16:18

不幸的是不起作用。即使在你的小提琴上，第二排的兩個DIV也不匹配頂部對齊。 – zur4ik

+1的字體大小：0。但我不能完全理解它的目的。 –

'font-size：0'在這種特殊情況下不需要，也是[inline-blocks之間的空格]的最佳解決方案之一（http://css-tricks.com/fighting-the-space-行間塊元素/）之間的問題。 –

只需添加overflow:hidden;到short-desk類是這樣的： -

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

2013-07-17 17:20:14

沒有，沒有工作。第二行的長框文本仍處於不同的垂直級別。 – zur4ik

@ zur4ik檢查小提琴鏈接。 –

Serlite的回答有幫助。感謝Vivek的幫助。 – zur4ik

回答