Verhindern von "doppelten" Grenzen in CSS

Angenommen, ich habe zwei Divs nebeneinander (nehmen Sie https://chrome.google.com/webstore/category/home als Referenz) mit einem Rahmen.

Gibt es eine Möglichkeit (vorzugsweise einen CSS-Trick), um zu verhindern, dass meine Divs einen doppelten Rand haben? Schauen Sie sich dieses Bild an, um besser zu verstehen, was ich meine:

Sie können sehen, dass dort, wo sich die beiden Divs treffen, es so aussieht, als hätten sie einen doppelten Rand.

#divNumberOne { border-right: 0; }

Wenn es sich um Elemente handelt, bei denen nicht garantiert werden kann, dass sie in einer bestimmten Reihenfolge angezeigt werden (möglicherweise 3 Elemente in einer Zeile, gefolgt von einer Zeile mit 2 Elementen usw.), möchten Sie etwas, das auf jedem Element in der Sammlung platziert werden kann . Diese Lösung sollte Folgendes abdecken:

.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;
}

Beachten Sie, dass Gliederung in älteren Browsern (IE7 und früher) nicht funktioniert .

Alternativ können Sie sich an die Ränder halten und negative Ränder verwenden:

.collection .child {
    margin-top: -1px;
    margin-left: -1px;
}

HTML:

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

CSS:

div {
    border: 1px solid #000;
    float: left;
}

div:nth-child(n+2) {
    margin-left: -1px;
}

Demo

Fügen Sie ie9.js für IE8 - Unterstützung (es ist sehr nützlich für alle CSS - Selektoren / pseudo-Elemente).

Eine andere Lösung, die in Betracht gezogen werden könnte, ist die Verwendung des CSS Adjacent-Geschwister-Selektors .

Das CSS

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsFiddle

Sie können einen ungeraden Selektor verwenden, um dies zu erreichen

.child{
   width:50%;
   float:left;
   box-sizing:border-box;
   text-align:center;
   padding:10px;
   border:1px solid black;
   border-bottom:none;
}
.child:nth-child(odd){
   border-right:none;
}
.child:nth-last-child(2),
.child:nth-last-child(2) ~ .child{
   border-bottom:1px solid black
}

<div>
    <div class="child" >1</div>
    <div class="child" >2</div>
    <div class="child" >3</div>
    <div class="child" >4</div>
    <div class="child" >5</div>
    <div class="child" >6</div>
    <div class="child" >7</div>
    <div class="child" >8</div>
</div>

Wenn die Divs alle den gleichen Klassennamen haben:

div.things {
    border: 1px solid black;
    border-left: none;
}

div.things:first-child {
    border-right: 1px solid black;
}

Hier gibt es eine JSFiddle-Demo .

Ich komme zu spät zur Show, versuche aber, die Gliederungseigenschaft wie folgt zu verwenden:

.item {
  outline: 1px solid black;
}

Umrisse in CSS belegen keinen physischen Raum und überlappen sich daher, um eine doppelte Grenze zu verhindern.

Fügen Sie dem Div auf der rechten Seite das folgende CSS hinzu:

position: relative;
left: -1px; /* your border-width times -1 */

Oder entfernen Sie einfach einen der Ränder.

Ich benutze nur

border-collapse: collapse;

im übergeordneten Element

Bei Verwendung von Flexbox musste ein zweiter untergeordneter Container hinzugefügt werden, damit sich die Umrisse ordnungsgemäß überlappen ...

<div class="grid__container">
    <div class="grid__item">
        <div class="grid__item-outline">
              <!-- content -->
        </div>
    </div>
</div>

SCSS

.grid__container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 1px 0 0; // margin-right 1px to give the correct width to the container
}

.grid__item {
    flex: 0 1 25%; // grid of 4
    margin: 0 0 1px; // margin-bottom to prevent double lines
}

.grid__item-outline {
    margin: 0 0 0 1px; // margin-left to prevent double lines
    outline: 1px solid #dedede;
}

  <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

Mein Anwendungsfall war für Boxen in einer einzelnen Reihe, in denen ich wusste, was das letzte Element sein würde.

.boxes {
  border: solid 1px black  // this could be whatever border you need
  border-right: none;
}

.furthest-right-box {
  border-right: solid 1px black !important;
}

Ich weiß, dass dies eine späte Reaktion ist, aber ich wollte nur meinen Wert von 2 Cent senken, da meine Art, dies zu tun, nicht hier ist.

Sie sehen, ich spiele wirklich nicht gerne mit Rändern, besonders nicht mit negativen Rändern . Jeder Browser scheint damit ein bisschen anders umzugehen, und die Ränder werden leicht von vielem beeinflusst Situationen beeinflusst.

Um sicherzustellen, dass ich eine schöne Tabelle mit divs habe, erstelle ich zuerst eine gute HTML-Struktur und wende dann das CSS an.

Beispiel, wie ich es mache:

 <div class="tableWrap">
   <div class="tableRow tableHeaders">
     <div class="tableCell first">header1</div>
     <div class="tableCell">header2</div>
     <div class="tableCell">header3</div>
     <div class="tableCell last">header4</div>
   </div>
   <div class="tableRow">
     <div class="tableCell first">stuff</div>
     <div class="tableCell">stuff</div>
     <div class="tableCell">stuff</div>
     <div class="tableCell last">stuff</div>
   </div>
</div>

Für das CSS verwende ich einfach die Zeilenstruktur, um sicherzustellen, dass die Ränder nur dort sind, wo sie sein müssen, und keine Ränder verursachen.

.tableWrap {
  display: table;
  }

.tableRow {
  display: table-row;
  }

.tableWrap .tableRow:first-child .tableCell {
  border-top: 1px solid #777777;
  }

.tableCell {
  display: table-cell;
  border: 1px solid #777777;
  border-left: 0;
  border-top: 0;
  padding: 5px;
  }

.tableRow .tableCell:first-child {
  border-left: 1px solid #777777;
  }

Et voila, ein perfekter Tisch. Dies würde natürlich dazu führen, dass Ihre DIVs 1px Unterschiede in der Breite aufweisen (insbesondere die erste), aber für mich hat dies nie zu irgendwelchen Problemen geführt. Wenn dies in Ihrer Situation der Fall ist, wären Sie wahrscheinlich stärker von Margen abhängig.

Ich konnte es mit diesem Code erreichen:

td.highlight {
    outline: 1px solid yellow !important;
    box-shadow: inset 0px 0px 0px 3px yellow;
    border-bottom: 1px solid transparent !important;
}

Eine sehr alte Frage, aber es war das erste Google-Ergebnis. Für alle, die darauf stoßen und keine Medienabfragen haben möchten, um den Rand rechts / links vom Element auf Mobilgeräten usw. wieder hinzuzufügen.

Die Lösung, die ich benutze, ist:

.element {
    border: 1px solid black;
    box-shadow: 0 0 0 1px black;
}

Dies funktioniert, weil Sie einen 2px-Rand um das Element sehen, das aus dem Rand und dem Schatten besteht. Wenn sich die Elemente treffen, überlappt sich der Schatten, wodurch er 2 Pixel breit bleibt.

Was ist mit einem margin:1px;um deine 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>

DEMO

Ich bevorzuge es, ein anderes Div dahinter als Hintergrund zu verwenden und alle Ränder zu löschen. Sie müssen nur die Größe des Hintergrund-Divs und die Position der Vordergrund-Divs berechnen.