H2内のインラインブロック奇妙なオフセット

Question

私はを囲む<a>を持っていて、画像もいくつかあり、<h2>とテキストの段落があります。 <a>はすべてinline-blockです。 H2が2本の線に伸びるときはいつでも、次の<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要素が垂直方向に一番下に配置されているからです。 2行のテキストがあるので、高さが上がり、フィットしません。これを試してみてください：

この編集はimrayの質問の後に来る

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

EDIT。

私はコードをもう一度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は、コードを動作させるように見える残して、時間によって変化する傾向トップに配置すると、次の行の要素がその行の先頭に揃うので、問題を完全に解決するはずです。