我有两个具有相同边框样式的div,有不同的高度,并且彼此背靠背。我希望他们之间的共同边界不要显示。这怎么能在html和css中完成?如何不显示两个相邻的div之间的公共边界?
回答
很多人都建议让小div
重叠较大的一个和左边框设置为相同的颜色作为背景色。这里的问题是,你会得到在两个点1px的差距在哪里了div
边界重叠:
为了避免这种情况,可以明确移除左边框,并有不透明的背景。
HTML
<div id="one"></div><div id="two"></div>
CSS
#one, #two {
width: 100px;
border: 1px solid black;
display: inline-block;
}
#one {
height: 200px;
}
#two {
height: 100px;
position: relative;
left: -1px;
background: white;
border-left: none;
}
编辑:
正如提到的那样,您还可以使用margin-left
而不是position
和left
的组合。这对您来说可能是更好的选择,具体取决于您以前的样式和元素排列方式(如果尚未设置margin-left
,在大多数情况下可能会更好)。
扎克希普利也做了有关浏览器支持的一个很好的点display: inline-block
,并添加下面的CSS:需要
*display: inline;
zoom: 1;
vertical-align: bottom;
而不是'position:relative; left:-1px;',那么'margin-left:-1px怎么样? '@ – thirdender 2012-08-16 22:31:33
@Tony_Henrich提到他需要IE7支持,所以只需添加一些代码来模拟'display:inline-block'。jsfiddle edit(添加一个正文背景以证明您的解决方案是健壮的) :http://jsfiddle.net/RWz4A/3/ – 2012-08-16 22:36:14
感谢您指出这些问题。我已经用您的两条建议更新了答案。 – Zhihao 2012-08-16 22:47:42
位置右边的小格重叠左div的边界, 并确保它不具有左边框设置
通过您的意见去在你的问题下,@Tony_Henrich,在这种情况下,我通常会通过使小号div的border-left-color
等于两个div的background-color
来“伪造”它。然后在较小的div上设置position: relative
和left: -<border-width value>
,使其与较大的div重叠。
这里有一个的jsfiddle:http://jsfiddle.net/5Q3A5/
- 1. Bootstrap添加相邻div之间的两个像素边距
- 2. 如何在两个相邻的div之间隐藏阴影
- 3. 如何显示两个物体相邻?
- 4. Div边界不显示
- 5. IE中两个相邻div之间的Wierd差距
- 6. 显示两个div对之间不相同blankspace线,以CONTENTEDITABLE =“真”
- 7. 如何实现与边界有装饰角的相邻div的双边框
- 8. 如何把两个div彼此相邻?
- 9. 选择两个表之间的公共行和非公共行
- 10. 如何隐藏html表中的行之间的边界,并使用css仅显示列之间的边界
- 11. 两个div彼此相邻
- 12. 如何在动态变化高度的两个div之间创建边界?
- 13. 如何显示IBM Graph中顶点之间的边界?
- 14. 计算多个多边形之间共享边界的长度
- 15. 如何让相邻和非相邻方格的边界全部相等?
- 16. 如何在包装div中显示彼此相邻的div?
- 17. 如何计算两个边界之间的素数双胞胎?
- 18. 如何填写两个面板之间的边界?
- 19. 如何避免两个边界之间的差距?
- 20. 如何添加2个div的单个边框相邻?
- 21. 如何显示两个相同模式之间的线?
- 22. 相邻的背景色divs之间的不需要的“边距”
- 23. 计算相邻矩形的边界
- 24. 如何从一个div中的三个div到两个彼此相邻的div?
- 25. 如何挑选两个组中的元素并应用公共边界?
- 26. 显示相邻的td之一
- 27. 需要获取两个相邻行之间的空间
- 28. 删除两个不同Arraylist之间的公共元素
- 29. jqueryui图标不显示两个相邻的跨度
- 30. DBGrid - 如何显示作为另一列的两个相邻行的列值之间的差异?
代码。 – 2012-08-16 21:50:52
您需要支持哪些浏览器? – vector 2012-08-16 21:51:32
借调。你介意做一个jsfiddle吗?这可以通过很多方法来解决,具体取决于您现在如何布置这些方法。 – 2012-08-16 21:52:04