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

Question

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

Answer 1

很多人建议让较小的div边框与较大的边框重叠，并将左边框设置为与背景颜色相同的颜色。这样做的问题是，在边框重叠的两个点处会出现 1px 的间隙div：

\n\n

http://jsfiddle.net/RWz4A/

\n\n

为了避免这种情况，您可以显式删除左边框，并使用不透明的背景。

\n\n

超文本标记语言

\n\n

<div id="one"></div><div id="two"></div>\xe2\x80\x8b\n

\n\n

CSS

\n\n

#one, #two {\n    width: 100px;\n    border: 1px solid black;\n    display: inline-block;\n}\n#one {\n    height: 200px;\n}\n#two {\n    height: 100px;\n\n    position: relative;\n    left: -1px;\n    background: white;\n    border-left: none;\n}\xe2\x80\x8b\n

\n\n

jsFiddle 演示

\n\n

编辑：

\n\n

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

\n\n

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

\n\n

*display: inline;\nzoom: 1;\nvertical-align: bottom;\n

\n