9

私は<a>周囲<div>にいくつかの画像、a <h2>、テキストの段落もあります。'sは<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プロパティを知っているなら、それは非常に役に立ちます。ありがとうございました。

4

1 に答える 1

22

aこれは、要素が下に垂直に配置されており、一部のh2要素が2行にまたがっていて、最後の要素が1行しかないためだと思います。これを試して：

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 */
}

実例

編集

この編集は、imrayの質問の後に行われます。

私はUbuntu12.04LTS（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、コードが機能するように見えますが、他のブラウザではテストされていませんが、単にそれらを上に揃えるだけで問題は解決するはずです。完全に上に揃えると、次の行の要素が行の一番上に揃えられるためです。

于 2012-08-24T16:43:15.083 に答える