Моя проблема в том, что мне нужны элементы, расположенные бок о бок с границами, но я заметил, что без некоторого взлома полей было сложно использовать свойство border
, и оно все равно выглядело неправильно. Однако, когда я использую outline
или box-shadow
, в конце возникает проблема с выравниванием.
.inner {
outline: 1px solid black;
width: 50%;
height: 50px;
float: left;
margin: 0;
display: inline-block;
box-sizing: border-box;
position: relative;
background: #fff;
}
<div class = "inner">
</div>
<div class = "inner">
</div>
<div class = "inner">
</div>
<div class = "inner">
</div>
<div class = "inner">
</div>
Это выглядит нормально, когда есть четное количество элементов, но когда у меня есть этот последний элемент, он выглядит нечетным. Кто-то может предложить, чтобы я просто подогнал его до конца, что было бы хорошо, но размер иногда можно настроить, так что это может быть обычным явлением.
Как правильно достичь этого, когда последний элемент правильно выравнивает границу (или контур)?
контуры перекрываются div, удалите цвет фона и используйте другой цвет для контура, тогда вы сможете лучше понять, что происходит.
Поскольку вы используете контур для создания границы, контуры в центре фактически перекрывают друг друга. Когда вы дойдете до конца, где есть только один div, контур не перекрывается и поэтому выглядит смещенным. Вы можете решить эту проблему, построив его в виде таблицы:
.table {
width: 100%;
display: table;
border-collapse: collapse;
}
.column {
display: table-row;
}
.inner {
display: table-cell;
border: 1px solid black;
width: 50%;
height: 50px;
background: #fff;
}
<div class = "table">
<div class = "column">
<div class = "inner"></div>
<div class = "inner"></div>
</div>
<div class = "column">
<div class = "inner"></div>
<div class = "inner"></div>
</div>
<div class = "column">
<div class = "inner"></div>
</div>
</div>
Спасибо, я подумал, что таблицы, вероятно, будут решением, которое я просто пытался избежать, поэтому мне не пришлось выполнять какую-либо реструктуризацию HTML.
Вы можете использовать дочерние селекторы, чтобы создать узор границы, который не удваивает границы. Вот рабочий пример.
Когда добавляю внутрь
.inner{border: 1px solid black }
, все нормально. Но границу стали думать.