html - 如何不显示两个相邻 div 之间的公共(public)边框？

Question

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

Answer 1

很多人建议使用较小的 div重叠较大的一个并将左边框设置为与背景颜色相同的颜色。这样做的问题是，您会在 div 所在的两个位置出现 1px 的间隙。边界重叠:

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

编辑:

正如 thirdender 提到的，您还可以使用 margin-left而不是 position 的组合和 left .根据您之前的样式和元素的排列方式，这对您来说可能是更好的选择(如果 margin-left 尚未设置，在大多数情况下可能更好)。

Zach Shipley 还就浏览器对 display: inline-block 的支持提出了一个很好的观点并添加了以下 CSS:

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