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

Question

我有两个具有相同边框风格的div，具有不同的高度并且背对背。我希望他们之间的共同边界不显示。如何在html和css中完成？

Answer 1

很多人建议让较小的div与较大的div重叠，并将左边框设置为与背景颜色相同的颜色。这个问题是你会在<div id="one"></div><div id="two"></div>​ 边框重叠的两个点上得到1px的差距：

http://jsfiddle.net/RWz4A/

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

<强> HTML

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

<强> CSS

margin-left

<强> jsFiddle Demo

修改

正如thirdender所提到的，您也可以使用position而不是left和margin-left的组合。这可能是一个更好的选择，具体取决于您之前的样式以及元素的排列方式（如果尚未设置display: inline-block，则在大多数情况下可能更好）。

Zach Shipley也对*display: inline; zoom: 1; vertical-align: bottom; 的浏览器支持提出了一个很好的观点，并添加了以下CSS：

{{1}}

Answer 2

将较小的div放在右边，与左边的div重叠， 并确保它没有border-left set

Answer 3

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

Answer 4

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

这是一个jsfiddle：http://jsfiddle.net/5Q3A5/