Неверно выровненный «контур» с нечетным количеством div

Моя проблема в том, что мне нужны элементы, расположенные бок о бок с границами, но я заметил, что без некоторого взлома полей было сложно использовать свойство border, и оно все равно выглядело неправильно. Однако, когда я использую outline или box-shadow, в конце возникает проблема с выравниванием.

Неверно выровненный «контур» с нечетным количеством div

.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>

Это выглядит нормально, когда есть четное количество элементов, но когда у меня есть этот последний элемент, он выглядит нечетным. Кто-то может предложить, чтобы я просто подогнал его до конца, что было бы хорошо, но размер иногда можно настроить, так что это может быть обычным явлением.

Как правильно достичь этого, когда последний элемент правильно выравнивает границу (или контур)?

Когда добавляю внутрь .inner{border: 1px solid black }, все нормально. Но границу стали думать.

Su Yatanar 27.09.2018 06:11

контуры перекрываются div, удалите цвет фона и используйте другой цвет для контура, тогда вы сможете лучше понять, что происходит.

Chris Li 27.09.2018 07:19
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
2
66
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Поскольку вы используете контур для создания границы, контуры в центре фактически перекрывают друг друга. Когда вы дойдете до конца, где есть только один 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.

Jacob Morrison 27.09.2018 17:54

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

beevbo 27.09.2018 20:02

Другие вопросы по теме

Применить функцию onclick function к $ (document) .ready
Является ли использование пользовательского CSS в классах начальной загрузки плохой привычкой?
Не удается заставить навигационную панель перестать показывать горизонтальную полосу прокрутки
Как сделать так, чтобы пользовательские сообщения появлялись в разделе консоли, когда люди открывают инструменты разработчика на моем сайте?
Делает ли css text-transform capitalize другие буквы строчными?
Как создать адаптивную карусель Bootstrap со статическим текстом заголовка героя, содержащимся в элементе контейнера?
Повернуть и разместить элемент заподлицо с краем родительского элемента, независимо от длины содержимого
Глобальная переменная не обнаруживается при использовании jquery, но ошибки нет
Почему мой div, расположенный (абсолютный) над изображением, скользит вверх, когда я уменьшаю ширину экрана?
Масштабировать весь элемент при изменении размера окна или доступе к нему на мобильном устройстве

Похожие вопросы

Применить функцию onclick function к $ (document) .ready
Извлечь таблицу с веб-страницы с помощью VBA
Не удается заставить навигационную панель перестать показывать горизонтальную полосу прокрутки
Как сделать так, чтобы пользовательские сообщения появлялись в разделе консоли, когда люди открывают инструменты разработчика на моем сайте?
Раскрывающийся список начальной загрузки в svg с d3
Как создать адаптивную карусель Bootstrap со статическим текстом заголовка героя, содержащимся в элементе контейнера?
Повернуть и разместить элемент заподлицо с краем родительского элемента, независимо от длины содержимого
Как загружать скрипты по запросам AJAX?
Почему мой div, расположенный (абсолютный) над изображением, скользит вверх, когда я уменьшаю ширину экрана?
Масштабировать весь элемент при изменении размера окна или доступе к нему на мобильном устройстве