3

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

在此处输入图像描述

4

4 回答 4

1

很多人建议让较小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 演示

编辑：

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

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

*display: inline;
zoom: 1;
vertical-align: bottom;
于 2012-08-16T22:25:52.540 回答
0

将较小的 div 放置在右侧以与左侧 div 的边框重叠，并确保它没有设置border-left

于 2012-08-16T21:54:05.490 回答
0

放border-right: ... border-left: ...

于 2012-08-16T22:09:01.410 回答
0

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

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

于 2012-08-16T22:19:33.693 回答