Как сделать border-collapse для div блоков?

@AnatoleiChubais · Регистрация: 28.06.2017

Author24 — интернет-сервис помощи студентам

Здравствуйте. Имею такую простую конструкци.

HTML5

1	<div class="right"></div><div class="left"></div>

CSS

.left
{
    border-left:1px solid red;
}
.right
{
    border-right:1px solid red;
}

Получается что две границы накладываются друг на друга и она стоновется толще. Как можно сделать, чтобы появилось правило - вроде border-collapse для таблицы.

@mrtoxas · 07.09.2017, 22:21

Волшебного стиля нет.

HTML5

<div class="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

1.

CSS

body {
  padding: 20px;
}
 
.block {
  width: 100px;
  height: 50px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  float: left;
  border-right: 1px solid black;
}
.block:first-child {
  border-left: 1px solid black;
}

2.

CSS

body {
  padding: 20px;
}
.block {
  width: 100px;
  height: 50px;
  float: left;
  border:1px solid black;
  &:not(:first-child){
   margin-left:-1px; 
  }
}

@Qwerty_Wasd · 07.09.2017, 22:23

AnatoleiChubais, первое что пришло в голову. Один из вариантов. Песочница

HTML5

1	<div class="main"><div class="left">bla-bla-bla</div><div class="right">bla-bla-bla</div>

CSS

1
2
3

.main{border-collapse:collapse;}
.left{display:table-cell;border:1px solid red;}
.right{display:table-cell;border:1px solid red;}

@AnatoleiChubais · 07.09.2017, 23:49 **[ТС]**

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

@Qwerty_Wasd · 08.09.2017, 00:15

AnatoleiChubais,

Сообщение от AnatoleiChubais

вы просто поменял блоки местами

на это можно наплевать по той причине, что border у обоих со всех сторон. Уберите

CSS

1	.main{border-collapse:collapse;}

и все поймете.

@AnatoleiChubais 2 / 2 / 2 Регистрация: 28.06.2017 Сообщений: 112
	07.09.2017, 23:49 [ТС]	4
	Qwerty_Wasd, вы просто поменял блоки местами, что понятно и логично, но я именно пытаюсь разобраться как слить две границы в одну без изменения толщины самой границы, вотс. 0

	08.09.2017, 00:15

Как сделать border-collapse для div блоков?

Решение