H2 inside div inline-block weird offset(H2内部div内联-块奇怪的偏移量)
问题描述
我在<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内联-块奇怪的偏移量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:H2内部div内联-块奇怪的偏移量
基础教程推荐
- 响应更改 div 大小保持纵横比 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 动态更新多个选择框 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 在for循环中使用setTimeout 2022-01-01