境界線のある2つのdivが隣り合っているとします(https://chrome.google.com/webstore/category/homeを参照してください)。
私のdivが二重の境界線を持っているように見えるのを防ぐ方法(できればCSSトリック)はありますか?私が何を意味するかをよりよく理解するためにこの画像を見てください:
2つのdivが出会う場所で、2つの境界線があるように見えることがわかります。
境界線のある2つのdivが隣り合っているとします(https://chrome.google.com/webstore/category/homeを参照してください)。
私のdivが二重の境界線を持っているように見えるのを防ぐ方法(できればCSSトリック)はありますか?私が何を意味するかをよりよく理解するためにこの画像を見てください:
2つのdivが出会う場所で、2つの境界線があるように見えることがわかります。
特定の順序で表示されることが保証されない要素(1つの行に3つの要素が続き、その後に2つの要素がある行が続くなど)について話している場合は、コレクション内のすべての要素に配置できるものが必要です。 。このソリューションはそれをカバーする必要があります:
.collection {
/* these styles are optional here, you might not need/want them */
margin-top: -1px;
margin-left: -1px;
}
.collection .child {
outline: 1px solid; /* use instead of border */
margin-top: 1px;
margin-left: 1px;
}
アウトラインは古いブラウザ(IE7以前)では機能しないことに注意してください。
または、境界線に固執して負のマージンを使用することもできます。
.collection .child {
margin-top: -1px;
margin-left: -1px;
}
#divNumberOne { border-right: 0; }
考えられる別の解決策は、CSS Adjacent sibling selectorを使用することです。
div {
border: 1px solid black;
}
div + div {
border-left: 0;
}
div がすべて同じクラス名の場合:
div.things {
border: 1px solid black;
border-left: none;
}
div.things:first-child {
border-right: 1px solid black;
}
ここにJSFiddle デモがあります。
次のCSSを右側のdivに追加します。
position: relative;
left: -1px; /* your border-width times -1 */
または、境界線の1つを削除します。
<div class="one"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
CSS:
.one{
width:100px;
height:100px;
border:thin red solid;
float:left;
}
.two{
width:100px;
height:100px;
border-style: solid solid solid none;
border-color:red;
border-width:1px;
float:left;
}
jsFiddle </p>
私はちょうど使用します
border-collapse: collapse;
親要素で
margin:1px;
あなたのdivの周りに何かを与えるのはどうですか。
<html>
<style>
.brd{width:100px;height:100px;background:#c0c0c0;border:1px solid red;float:left;margin:1px;}
</style>
<body>
<div class="brd"></div>
<div class="brd"></div>
<div class="brd"></div>
</body>
</html>
私はそれらの後ろにある別のdivを背景として使用し、すべての境界線を削除することを好みます。背景のdivのサイズと前景のdivの位置を計算するだけです。