html - 2 つの隣接する div 間の共通の境界線を表示しない方法は?

Question

同じ境界線スタイルの 2 つの div があり、高さが異なり、互いに背中合わせになっています。それらの間の共通の境界線が表示されないようにします。これをhtmlとcssでどのように行うことができますか?

Answer 1

多くの人が、小さい方divを大きい方に重ねて、左の境界線を背景色と同じ色に設定することを提案しています。これに関する問題は、境界線が重なる2 つの場所で 1 ピクセルのギャップが生じることです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 デモ

編集：

thirdender が述べたように、とmargin-leftの組み合わせの代わりに使用することもできます。これは、以前のスタイルや要素の配置方法によっては、より適切なオプションになる場合があります (まだ設定されていない場合は、ほとんどの場合より適切です)。positionleftmargin-left

display: inline-blockZach Shipleyは、次の CSS のブラウザー サポートについても指摘し、追加しました。

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

Answer 2

@Tony_Henrich さんの質問にあるコメントを参考にしてください。この状況では、通常border-left-color、小さい方の div を 2 つの div に等しくすることで「偽造」しbackground-colorます。次に、小さい div に設定position: relativeしleft: -<border-width value>て、大きい div と重なるようにします。

ここに jsfiddle があります: http://jsfiddle.net/5Q3A5/

Answer 3

小さい方の div を右側に配置して、左側の div の境界線と重なるようにし、border-left が設定されていることを確認します

Answer 4

設定border-right: ... border-left: ...