大佬教程收集整理的这篇文章主要介绍了div里面的H2内联块奇怪的偏移量，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
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 { 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的问题之后发生的.
我已经在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内联块奇怪的偏移量全部内容，希望文章能够帮你解决div里面的H2内联块奇怪的偏移量所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。