如何不顯示兩個相鄰的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之間的公共邊界？

回答

相關問題