如何不显示两个相邻的div之间的公共边界？

我有两个具有相同边框样式的div，有不同的高度，并且彼此背靠背。我希望他们之间的共同边界不要显示。这怎么能在html和css中完成？如何不显示两个相邻的div之间的公共边界？

enter image description here

来源

2012-08-16 Tony_Henrich

代码。 – 2012-08-16 21:50:52

您需要支持哪些浏览器？ – vector 2012-08-16 21:51:32

借调。你介意做一个jsfiddle吗？这可以通过很多方法来解决，具体取决于您现在如何布置这些方法。 – 2012-08-16 21:52:04

很多人都建议让小div重叠较大的一个和左边框设置为相同的颜色作为背景色。这里的问题是，你会得到在两个点1px的差距在哪里了div边界重叠：

http://jsfiddle.net/RWz4A/

为了避免这种情况，可以明确移除左边框，并有不透明的背景。

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; 
}

jsFiddle Demo

编辑：

正如提到的那样，您还可以使用margin-left而不是position和left的组合。这对您来说可能是更好的选择，具体取决于您以前的样式和元素排列方式（如果尚未设置margin-left，在大多数情况下可能会更好）。

扎克希普利也做了有关浏览器支持的一个很好的点display: inline-block，并添加下面的CSS：需要

*display: inline; 
zoom: 1; 
vertical-align: bottom;

来源

2012-08-16 22:25:52 Zhihao

而不是'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的边界，并确保它不具有左边框设置

来源

2012-08-16 21:54:05 cobaco

设置border-right: ... border-left: ...

来源

2012-08-16 22:09:01 Lukas

只需设置左右边框会给你一个1像素的差距边界相交：http：//jsfiddle.net/RWz4A/ – Zhihao 2012-08-16 22:10:31

也许这将是某种快捷方式，但你可以这样做，http：// jsfiddle.net/M89PF/ – Lukas 2012-08-16 22:18:14

通过您的意见去在你的问题下，@Tony_Henrich，在这种情况下，我通常会通过使小号div的border-left-color等于两个div的background-color来“伪造”它。然后在较小的div上设置position: relative和left: -<border-width value>，使其与较大的div重叠。

这里有一个的jsfiddle：http://jsfiddle.net/5Q3A5/

来源

2012-08-16 22:19:33

与我在下面LukaszBorawski的回答中提到的相同的问题。这会给你一个1像素的差距，边界相交：http://jsfiddle.net/RWz4A/ – Zhihao 2012-08-16 22:21:15

我不知道这是保证downvote。这个问题得到了回答，但也许不是最漂亮的方式。不过，我相信你发布的解决方案比较好，@ hi浩。 – 2012-08-16 22:30:11

对不起，你是对的。我想我只是有点愤怒，看到它编辑添加一个jsFiddle与我前面提到的相同的问题（两次）。我将删除downvote。 – Zhihao 2012-08-16 22:35:36

如何不显示两个相邻的div之间的公共边界？

回答

相关问题