Ответ 1
Чистый CSS (некоторые ограничения)
Это решение основано на модификации другого решения для аналогичной проблемы, которую я дал в другом месте.
Он включает сложную взаимосвязь перекрывающихся псевдоэлементов для создания границ, что может привести к тому, что решение будет иметь определенные ограничения на то, что может или не может быть выполнено внутри него (сложный фон будет проблемой, а также как необходимость для определенных аспектов позиционирования). Тем не менее он функционирует в данном случае.
Немного пояснения
По существу, каждый элемент .item создает собственный раздел верхних/нижних границ, используя как элементы :after, так и :before, первый привязан к .itemContainer, последний привязан к самому .item (для создания последнего бит границы в конце строки требуется :before). Кроме того, :before также создает "гибкую" позицию правой границы, чтобы дать ей необходимую реакцию, когда элемент смещается вне поля зрения. Вот почему :before должен быть связан с самим .item, а также почему каждый элемент фона :after должен использоваться для "скрытия" правой границы предыдущего элемента :before.
Поскольку мы не знаем через css "count" в любой заданной точке относительно того, какой элемент является "последним" на дисплее, все элементы :before должны отображаться, но нам не нужны правильные границы для них всех, поэтому почему :after должен их покрыть. Когда элемент переходит к следующей строке, его :after больше не покрывает правую границу того, что теперь стало последним отображаемым элементом, показывая, что граница используется как "правая" граница всей группы.
HTML (соответствие вашей оригинальной скрипке)
<div class="itemBar">
<div class="itemContainer">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
CSS основных элементов
.itemBar {
display: inline-block;
width: 50%; /* some width can be set, does not need to be this */
}
.itemContainer {
position: relative; /* :after pseudo-elements are positioned off this */
z-index: 1; /* needed for pseudo-element interaction */
overflow: hidden;
display: inline-block;
max-height: 68px;
width: 100%;
border-left: 1px solid black; /* left border is supplied by this */
}
.item {
width: 60px;
height: 62px;
display: inline-block;
margin: 2px;
border: 1px solid black;
/* NOTE: CANNOT be given positioning */
}
CSS псевдоэлементов
.item::after {
content: '';
position: absolute; /* will position off itemContainer */
z-index: -1; /* push it to the background */
top: 0; /* set it to top of itemContainer */
bottom: 0; /* set it to bottom of itemContainer */
margin-left: -100%; /* shove it past the far left edge of itemContainer */
/* next, use padding to bring it back to its position at the end
of the text string of .item */
padding-left: 100%;
/* next, add enough padding on the right to compensate for the right
padding, right margin, and right border of .item */
padding-right: 3px;
/* next, create the top and bottom border of "container",
in conjunction with the :before; so this is a pseudo-border for
.itemContainer being created by the .item elements */
border-top: 1px solid black;
border-bottom: 1px solid black;
background: #fff; /* hide other :before borders */
}
.item:before { /* make right border */
content: '';
padding-top: 66px; /* give it .itemContainer height minus border heights */
width: 100%;
margin-top: -3px; /* .item top margin + border width */
margin-left: -100%; /* pull the text in .item back into position */
margin-right: 0;
/* next, push this behind the background with an even lower z-index
to hide it if it is not the right most element beign used to
form the right border */
z-index: -2;
float: right; /* get the before element to the right */
position: relative; /* needs to be adjusted in position */
right: -4px; /* move it same as padding-right of the after element */
display: block; /* give it a display */
/* next, use it to build the fake right border and also the fake
final top/bottom borders of the of itemContainer */
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
