Тонкость при равномерном выравнивании блоков по ширине

23 июля 2016 г. 8:31

Чтобы равномерно выравнить блоки по ширине достаточно написать что-то вроде:

# html
<div class="wr">
    <div></div>
    <div></div>
    <div></div>
</div>

#css
.wr {text-align: justify;}
.wr:before {content: '';display: block;width: 100%;height: 0;}
.wr:after {width: 100%;height: 0;visibility: hidden;overflow: hidden;content: '';display: inline-block;}

.wr div {display: inline-block;position: relative;width: 20px; height: 10px;background-color:#000;}

И этот код будет работать в большинстве случаев. Но может возникнуть проблема такого рода, как не работает или, другими словами, блоки слиплись. Или же выравнивается неправильно со сдвигом вправо. Вся фишка заключается в невидимых неразрывных пробелах &nbsp.

Случай 1. Блоки слиплись

В случае когда блоки слиплись, код html, скорее всего, выглядит так:

<div class="wr"><div></div><div></div><div></div></div>

Или же такой код может получиться применением django тега {% spaceless %}, если, конечно, вы используете Django. Напомню, что в Django spaceless убирает лишние пробелы между html-тегами.

Случай 2. Блоки равномерно выравниваются, но со двигом вправо

Данная ситуация может возникнуть, если стоит неразрывной пробел перед первым <div></div>:

# html
{% spaceless %}
<div class="wr">
    &nbsp <div></div>
    <div></div>
    <div></div>
</div>
{% endspaceless %}

Я намерено оставил spaceless, чтобы показать, что в редакторе мы видим именно такой код, как показано выше.

А теперь как надо

# html
<div class="wr">
    <div></div>&nbsp
    <div></div>&nbsp
    <div></div>
</div>

Теперь наши блоки займут положение как надо. При равномерном выравнивании блоков нужно, чтобы между блоками стоял &nbsp.

Оцените статью

5 из 5 (всего 1 оценка)

captcha
Отмеченные звёздочкой поля ( * ) являются обязательными для заполнения.

Спасибо за ваш отзыв!

После нажатия кнопки "Отправить" ваше сообщение будет доставлено мне на почту.

Автор статьи

Артём Мальцев

Веб-разработчик, владеющий знаниями языка программирования Python, фреймворка Django, системы управления содержимым сайта Django CMS, платформы для создания интернет-магазина Django Shop и многих различных приложений, использующих эти технологии.

Права на использование материала, расположенного на этой странице https://vivazzi.pro/ru/it/justify-blocks/:

Разрешается копировать материал с указанием её автора и ссылки на оригинал без использования параметра rel="nofollow" в теге <a>. Использование:

Автор статьи: Артём Мальцев
Ссылка на статью: <a href="https://vivazzi.pro/ru/it/justify-blocks/">https://vivazzi.pro/ru/it/justify-blocks/</a>

Больше: Правила использования сайта

Представляю вашему вниманию книгу, написанную моим близким другом Максимом Макуриным: Секреты эффективного управления ассортиментом.

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

Комментарии: 0

Вы можете оставить комментарий как незарегистрированный пользователь.

Но зарегистрировавшись, вы сможете:

  • получать оповещения об ответах
  • просматривать свои комментарии
  • иметь возможность использовать все функции разработанных сервисов

Для комментирования от своего имени войдите или зарегистрируйтесь на сайте Vuspace

Отправить

На данный момент нет специального поиска, поэтому я предлагаю воспользоваться обычной поисковой системой, например, Google, добавив "vivazzi" после своего запроса.

Попробуйте

Выберите валюту для отображения денежных единиц