Скажем, у меня есть два div рядом друг с другом (возьмите https://chrome.google.com/webstore/category/home в качестве ссылки) с рамкой.
Есть ли способ (желательно трюк CSS), чтобы мои divs не появлялись, как имеющие двойную границу? Взгляните на этот образ, чтобы лучше понять, что я имею в виду:
Вы можете видеть, что, где встречаются два divs, похоже, что они имеют двойную границу.
#divNumberOne { border-right: 0; }
Если мы говорим о элементах, которые не могут быть гарантированы для отображения в каком-либо конкретном порядке (возможно, 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;
}
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/псевдоэлементов).
Другое решение, которое можно рассмотреть, - это использование селектора соседних элементов CSS.
div {
border: 1px solid black;
}
div + div {
border-left: 0;
}
Вы можете использовать нечетный селектор, чтобы добиться этого
.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>Если все div имеют одно и то же имя класса:
div.things {
border: 1px solid black;
border-left: none;
}
div.things:first-child {
border-right: 1px solid black;
}
Здесь JSFiddle demo здесь.
Добавьте следующий CSS в div справа:
position: relative;
left: -1px; /* your border-width times -1 */
Или просто удалите одну из границ.
Я просто использую
border-collapse: collapse;
в родительском элементе
<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;
}
Мой вариант использования был для ящиков в одной строке, где я знал, каким будет последний элемент.
.boxes {
border: solid 1px black // this could be whatever border you need
border-right: none;
}
.furthest-right-box {
border-right: solid 1px black !important;
}
Я знаю, что это поздняя реакция, но я просто хотел сбросить свои 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 в ширинах (в частности, первую), но для меня это никогда не создавало каких-либо проблем. Если это произойдет в вашей ситуации, я полагаю, что вы больше зависите от полей.
При использовании 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;
}
Я опаздываю на шоу, но попробуйте использовать свойство структуры, например:
.item {
outline: 1px solid black;
}
Контуры в CSS не занимают физическое пространство и поэтому перекрываются, чтобы предотвратить двойную границу.
Я смог добиться этого с помощью этого кода:
td.highlight {
outline: 1px solid yellow !important;
box-shadow: inset 0px 0px 0px 3px yellow;
border-bottom: 1px solid transparent !important;
}
Как насчет предоставления 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.