H2內div內聯塊怪異偏移

Question

我有一個<a>圍繞<div>其中也有一些圖像，<h2>和一段文字。 <a>的全部都是inline-block。每當H2延伸到兩條線時，下一個<a>被抵消。以下是截圖。

HTML：

<a href="#"> 
    <div> 
     <div class="imgOverflow"> 
      <img src="/hello/there"> 
     </div> 
     <h2>This is the title</h2> 
     <p>This is a paragraph</p> 
    </div> 

</a> 

CSS：

a { 
    display:inline-block; 
    font-size:16px; 
    border:1px solid grey; 
    width:260px; 
    margin:5px; 
    color:black; 
    overflow: hidden; 
} 
div { 
    display:block; 
    padding:5px; 
    width:250px; 
    height:300px; 
} 
p { 
    font-size:12px; 
    text-align:justify; 
} 
h2 { 
    margin:5px 0 10px 0; 
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
} 
.imgOverflow { 
    margin:-5px 0 0 -5px; 
    width:260px; 
    padding:0; 
    overflow:hidden; 
    height:130px; 
    display:block; 
}  

如果有人知道某種CSS屬性來避免這種情況，這將是非常有幫助的。謝謝。

Answer 1

那是因爲你的a元素垂直對齊底部。由於您有兩行文字，因此高度增加並且不適合。試試這個：

a { 
display:inline-block; 
font-size:16px; 
border:1px solid grey; 
width:260px; 
margin:5px; 
color:black; 
overflow: hidden; 
vertical-align: top; /* Notice this line */ 
} 

A working example

編輯

此編輯來imray的問題之後。

我已經在Ubuntu 12.04 LTS - Chrome 33.0.1750.152中再次測試了這段代碼，將近2年後這個問題已經得到回覆，並且發現 - 現在 - 當您刪除vertical-align屬性時，代碼也可以工作。但是，如果刪除overflow屬性，則會看到顯示中斷。以上

增加高度，我其實是行高。這是我的不好，我不是原生的對不起。

現在，想象一下下面的情況：

This is our container: 
------------------------------------------------ 
|      Element 2:    | 
| Element 1:  --------------------  | 
| ------------- | Lorem ipsum dolor|  | 
| | Lorem ips | | sit amet   |  | 
| ------------- --------------------  | 
------------------------------------------------ 

時的默認值是在element 1和element 2將對齊到其容器的基線，這基線的變化 - 顯然 - 根據容器的高度，最終由他們的孩子的身高決定 - 如果沒有指定的話。

顯然，通過寫作的時候 - 如CSS實現瀏覽器往往通過時間來改變，刪除vertical-align: bottom和離開overflow: hidden似乎使代碼的工作 - 在其他瀏覽器沒有測試 - ，但隨後又簡單地將其對準頂部，應該完全解決問題，因爲當您對齊頂部時，下一行中的元素將與行頂部對齊。