H2内部div内联-块奇怪的偏移量 [英] H2 inside div inline-block weird offset

问题描述

我在<div>周围有一个<a>，它也有一些图像、一个<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属性来避免这种情况，那将是非常有帮助的。谢谢。

推荐答案

我猜这是因为您的a元素垂直与底部对齐，并且您的一些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中再次测试了代码，在将近两年后，这个问题得到了回答，并发现-现在-当你删除vertical-align属性时，代码往往也能正常工作。但是，同时如果您删除overflow属性，您将看到显示中断。

现在，假设以下情况：

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

当默认为启用element 1和element 2时，element 1和element 2将与其容器的基线对齐，并且此基线显然会根据容器的高度进行更改，容器的高度在末尾由其子对象的高度确定-如果未指定的话。

显然，在撰写本文时-因为浏览器的CSS实现往往会随着时间的推移而改变-删除vertical-align: bottom并保留overflow: hidden似乎可以使代码工作-在其他浏览器中没有测试-但再次简单地将它们对齐到顶部，应该会完全解决问题，因为当您对齐到顶部时，下一行中的元素将对齐到行的顶部。

这篇关于H2内部div内联-块奇怪的偏移量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！