@HellYeahOmg

Как сделать такой border у блоков?

5bc4ade3e9d1c868437263.png
Как сверстать, чтобы границы блоков не наслаивались по всем граням?
Таблицы использовать нельзя.
  • Вопрос задан
  • 327 просмотров
Решения вопроса 1
border: 1px solid #000;
margin:-1px 0 0 -1px;


Или вот такой хак нашла) https://codepen.io/anon/pen/ZqaXNy
.item{
  width: 200px;
  height: 200px;
  box-shadow: 
    1px 0 0 0 #000, 
    0 1px 0 0 #000, 
    1px 1px 0 0 #000,
    1px 0 0 0 #000 inset, 
    0 1px 0 0 #000 inset;
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
natojezlo
@natojezlo
таблицей проще
table{border-collapse:collapse;}
table td{border:1px solid #999;}

блоками, все что приходит на ум ))
.container{border-right:1px solid #999; border-top:1px solid #999;
display:grid; grid-template-columns:repeat(3, 1fr);}
.container div{border-left:1px solid #999; border-bottom:1px solid #999;}

<div class="container">
<div>содержимое яцейки</div>
<div>содержимое яцейки</div>
<div>содержимое яцейки</div>
<div>содержимое яцейки</div>
<div>содержимое яцейки</div>
<div>содержимое яцейки</div>
</div>


или так
<div class="container">
    <div class="column">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="column">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="column">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    ...
</div>


.container {
    display: table;
    border-collapse: collapse;
}
.column {
    float: left;
    overflow: hidden;
    width: 120px;
}
.cell {
    display: table-cell;
    border: 1px solid red;
    width: 120px;
    height: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
Ответ написан
Комментировать
@vardoLP
Ват ю сэй эбаут май мама?!
да просто

.block:nth-child(2n+2){
    border-right:none;
}


ну и т.д.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы