div里面的H2内联块奇怪的偏移量

我有一个< a>围绕一个< div>其中还有一些图像,< h2>和一段文字. < a>都是内联块.每当H2延伸到两行时,下一个< a>被抵消了.下面是截图.

<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属性以避免这种情况会非常有帮助.谢谢.

解决方法

我想这是因为你的元素垂直对齐到底部,你的一些h2元素跨越两条线,而最后一条元素只有一条线.试试这个：

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属性时,代码也可以正常工作.但是,如果您删除溢出属性,那么您将看到显示中断.

现在,想象一下以下情况：

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

当元素1上的默认值和元素2将与其容器的基线对齐时,此基线会发生变化 – 显然 – 根据容器的高度,最终由子项的高度决定 – 否则不会指定.

显然,到撰写本文时 – 由于浏览器的css实现往往会随着时间的推移而改变,删除vertical-align：bottom并保留溢出：隐藏似乎使代码工作 – 未在其他浏览器中测试 – 但再次简单地对齐它们应该完全解决问题,因为当您对齐顶部时,下一行中的元素将对齐到行的顶部.

div里面的H2内联块奇怪的偏移量

解决方法

猜你在找的CSS相关文章