Предотвращение "двойных" границ в CSS

Скажем, у меня есть два div рядом друг с другом (возьмите https://chrome.google.com/webstore/category/home в качестве ссылки) с рамкой.

Есть ли способ (желательно трюк CSS), чтобы мои divs не появлялись, как имеющие двойную границу? Взгляните на этот образ, чтобы лучше понять, что я имею в виду:

"Double" border

Вы можете видеть, что, где встречаются два divs, похоже, что они имеют двойную границу.

Ответы

Ответ 1

#divNumberOne { border-right: 0; }

Ответ 2

Если мы говорим о элементах, которые не могут быть гарантированы для отображения в каком-либо конкретном порядке (возможно, 3 элемента в одной строке, за которыми следует строка с двумя элементами и т.д.), вы хотите, чтобы что-то, что можно было разместить на каждом элементе в сборнике. Это решение должно охватывать это:

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

Ответ 3

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

Демо

Включить ie9.js для поддержки IE8 (это очень полезно для всех селекторов CSS/псевдоэлементов).

Ответ 5

Вы можете использовать нечетный селектор, чтобы добиться этого

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

Ответ 6

Если все div имеют одно и то же имя класса:

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

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

Здесь JSFiddle demo здесь.

Ответ 7

Добавьте следующий CSS в div справа:

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

Или просто удалите одну из границ.

Ответ 8

Я просто использую

border-collapse: collapse;

в родительском элементе

Ответ 9

  <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  

Ответ 10

Мой вариант использования был для ящиков в одной строке, где я знал, каким будет последний элемент.

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

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

Ответ 11

Я знаю, что это поздняя реакция, но я просто хотел сбросить свои 2 цента, потому что мой способ сделать это не здесь.

Видите ли, мне действительно не нравится играть с полями, особенно отрицательными. Кажется, что каждый браузер обрабатывает их только так, что бит бит немного отличается, и на поля легко влияют ситуации много.

Мой способ убедиться, что у меня есть хорошая таблица с div, сначала создает хорошую структуру html, а затем применим css.

Пример того, как я это делаю:

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

Теперь, для css, я просто использую структуру строк, чтобы убедиться, что границы только там, где они должны быть, не создавая полей;

.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, идеальный стол. Теперь, очевидно, это приведет к тому, что ваши DIVs будут иметь разницу в 1px в ширинах (в частности, первую), но для меня это никогда не создавало каких-либо проблем. Если это произойдет в вашей ситуации, я полагаю, что вы больше зависите от полей.

Ответ 12

При использовании Flexbox было необходимо добавить второй дочерний контейнер, чтобы правильно получить контуры, перекрывающие друг друга...

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

Ответ 13

Я опаздываю на шоу, но попробуйте использовать свойство структуры, например:

.item {
  outline: 1px solid black;
}

Контуры в CSS не занимают физическое пространство и поэтому перекрываются, чтобы предотвратить двойную границу.

Ответ 14

Я смог добиться этого с помощью этого кода:

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

Ответ 15

Как насчет предоставления 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>

DEMO

Ответ 16

Я предпочитаю использовать другой div позади них в качестве фона и удалять все границы. Вам нужно просто рассчитать размер фонового div и положение передних div.