Empêcher les «doubles» frontières dans CSS

87

Disons que j'ai deux divs côte à côte (prenez https://chrome.google.com/webstore/category/home comme référence) avec une bordure.

Existe-t-il un moyen (de préférence une astuce CSS) pour empêcher mes divs de ressembler à une double bordure? Jetez un œil à cette image pour mieux comprendre ce que je veux dire:

Bordure "double"

Vous pouvez voir que là où les deux divs se rencontrent, il semble qu'ils aient une double bordure.

John Smith
la source
non, je l'utilise avec un isotope, je ne peux donc pas utiliser de table. Les divs ont des tailles différentes
john smith
Est-ce seulement un problème pour vous gauche-droite, ou devez-vous également vous en préoccuper de haut en bas?
VictorKilo
j'aurais aimé qu'il y ait une meilleure solution pour cela en CSS. :-(
richardstelmach

Réponses:

19

#divNumberOne { border-right: 0; }

Andy
la source
11
C'est la seule véritable façon de le faire qui ne gâche pas d'autres choses. Si vous avez besoin de faire plusieurs éléments, enfer, disons 100 divs, vous pouvez faire div { border-right: none; } div:last-child { border-right: 1px solid black; }ce qui vous donnerait l'effet
escompté
oui, cela peut toujours être fait de cette façon, mais je me demandais s'il y avait une façon purement css de le faire, sans avoir à utiliser plus d'une classe (j'aurai plus de lignes et de colonnes)
john smith
3
C'est pur css, j'ai utilisé une pseudo classe (dernier enfant) donc je n'ai pas modifié le html de toute façon, il y a beaucoup de pseudo classes et je dirais d'aller dans cette voie car je ne pense pas qu'il y ait d'alternative
Andy
Regardez dans Nth Child, vous pouvez le faire de cette façon en utilisant pair et impair ou en fonction de votre mise en page, vous pouvez le calculer comme vous le souhaitez.
MaxwellLynn
1
Pourquoi cela a-t-il été accepté comme la bonne réponse? Je ne pense vraiment pas que ce soit ce qu'il cherchait. Ce n'est certainement pas non plus une solution évolutive.
Kevin Behan
78

Si nous parlons d'éléments qui ne peuvent pas être garantis d'apparaître dans un ordre particulier (peut-être 3 éléments dans une ligne, suivis d'une ligne avec 2 éléments, etc.), vous voulez quelque chose qui puisse être placé sur chaque élément de la collection . Cette solution devrait couvrir que:

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

Notez que le contour ne fonctionne pas dans les anciens navigateurs (IE7 et antérieurs).

Alternativement, vous pouvez vous en tenir aux bordures et utiliser des marges négatives:

.collection .child {
    margin-top: -1px;
    margin-left: -1px;
}
Cimmanon
la source
1
Merci de partager ceci. Je travaillais littéralement là-dessus pendant des heures, en descendant le chemin de la frontière (au lieu du contour). Cela a fonctionné à merveille!
Jessy Houle
C'est une technique vraiment intelligente. À votre santé!
da5id
2
Très utile. J'ajoute aussi position: relative;left: 1px;, pour revenir à la marge négative.
Bartosz Walicki
1
C'est vraiment intelligent !. Je pense que cela devrait être la réponse.
Rejoy
C'est bien mieux que la réponse
CH4B
20

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

Démo

Incluez ie9.js pour le support IE8 (c'est très utile pour tous les sélecteurs / pseudo-éléments CSS).

Giona
la source
si vous avez plus d'une ligne, la première division de la deuxième ligne n'a pas de bordure gauche et avec cette astuce, l'alignement des divs va à gauche pour 1px
Afshin
N'y avait-il pas de version plus compliquée? Qu'en est-il des éléments avec un plus grand right-margin?
feeela
@afshin si je ne vois pas sa mise en page, comment puis-je donner une réponse spécifique?
Giona
@feeela je pense que c'est assez basique. Quoi qu'il en soit, right-marginn'affecte pas left-margin: jsfiddle.net/gionaf/D6tHK/1
Giona
1
Cela résout les doubles frontières latérales, mais pas la verticale; les bordures en bas / haut sont toujours doublées. Des conseils pour ceux-là?
delphirules
15

Une autre solution à envisager consiste à utiliser le sélecteur de frères CSS Adjacent .

Le CSS

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsFiddle

Stéphan
la source
Belle astuce, merci! J'ai trouvé que j'avais de meilleurs résultats en utilisant border-left: none;sinon j'ai un petit espace en haut à gauche de la div !? (Firefox).
IanB
Vous voudrez peut-être utiliserdiv + div { border-left: 0; }
Sergey Stadnik
6

Vous pouvez utiliser un sélecteur impair pour y parvenir

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

entrez la description de l'image ici

codegeek
la source
ne serait-il pas préférable de faire nth-child (even) {border-left: none;}? De cette façon, il pourrait y avoir un nombre impair de colonnes ...
pixelearth
5

Si les divs ont tous le même nom de classe:

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

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

Il y a une démo de JSFiddle ici.

Roddy des pois surgelés
la source
+1 L'une des rares pseudo classes reconnues par IE 7 + 8…
feeela
Ce n'est pas bon si votre DIV est sur 2 lignes: vous avez une double bordure entre les 2 lignes ..
Didier68
@ Didier68 Ce n'était pas la question, cependant.
Roddy of the Frozen Peas
La question est "éviter les doubles frontières" ... mais sans préciser si c'est latéralement ou verticalement ... Votre solution est bonne pour <TD> par exemple, mais pas pour les DIV. Je fais la même remarque à Stephan ci-dessous!
Didier68
Je n'ai aucune idée de ce dont vous parlez. La question concerne les div, la réponse concerne les div, le violon utilise les div. D'où venez-vous des td?
Roddy of the Frozen Peas
5

Je suis en retard au spectacle mais essayez d'utiliser la propriété contour, comme ceci:

.item {
  outline: 1px solid black;
}

Les contours en CSS n'occupent pas d'espace physique et se chevaucheront donc pour éviter une double bordure.

Michael Giovanni Pumo
la source
fonctionne également, lorsqu'une ligne se divise en plusieurs lignes sur des écrans plus petits - toutes les autres réponses ne fonctionnent pas lorsque vos divs pourraient se diviser en nouvelles lignes. vous avez alors au moins un div avec un côté sans bordure. merci pour le partage - voté
DigitalJedi
Beaucoup mieux d'avoir une solution qu'un hack. Merci.
forrest le
1

Ajoutez le CSS suivant au div sur la droite:

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

Ou supprimez simplement l'une des bordures.

bfavaretto
la source
1

J'utilise juste

border-collapse: collapse;

dans l'élément parent

JayCee
la source
1

En utilisant Flexbox, il était nécessaire d'ajouter un deuxième conteneur enfant pour que les contours se chevauchent correctement ...

<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;
}
ness-EE
la source
0
  <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

Afshin
la source
0

Mon cas d'utilisation concernait des boîtes sur une seule ligne où je savais quel serait le dernier élément.

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

.furthest-right-box {
  border-right: solid 1px black !important;
}
Sam Henderson
la source
0

Je sais que c'est une réaction tardive, mais je voulais juste laisser tomber mes 2 cents, car ma façon de le faire n'est pas ici.

Vous voyez, je n'aime vraiment pas jouer avec les marges, en particulier les marges négatives . Chaque navigateur semble gérer ces derniers un peu différemment et les marges sont facilement influencées par beaucoup situations.

Ma façon de m'assurer d'avoir une belle table avec des divs, est de créer d'abord une bonne structure html , puis d'appliquer le CSS.

Exemple de comment je le fais:

 <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>

Maintenant, pour le css, j'utilise simplement la structure des lignes pour m'assurer que les bordures sont uniquement là où elles doivent être, sans aucune marge;

.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 voilà, une table parfaite. Maintenant, évidemment, cela entraînerait des différences de largeur de 1px dans vos DIV (en particulier le premier), mais pour moi, cela n'a jamais créé de problème d'aucune sorte. Si tel est le cas dans votre situation, je suppose que vous dépendriez alors davantage des marges.

NoobishPro
la source
0

J'ai pu y parvenir en utilisant ce code:

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

Une question très ancienne, mais c'était le premier résultat Google, donc pour quiconque rencontre cela et ne veut pas avoir de requêtes multimédias pour rajouter la bordure à droite / gauche de l'élément sur mobile, etc.

La solution que j'utilise est:

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

Cela fonctionne car vous verrez une bordure de 2 pixels autour de l'élément constitué de la bordure et de l'ombre. Cependant, là où les éléments se rencontrent, l'ombre se chevauche, ce qui la maintient 2px de large;

abnoas
la source
-1

Que diriez-vous de donner un margin:1px;autour de votre 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

defau1t
la source
-3

Je préfère utiliser un autre div derrière eux comme arrière-plan et supprimer toutes les bordures. Il vous suffit de calculer la taille du div d'arrière-plan et la position des divs de premier plan.

puits7m
la source
Je pense que ma solution est la meilleure malgré les critiques. C'est le même principe que de dessiner une table 1px:
well7m