Закрыть

Для эффективной работы на сайте используются cookie и обработка персональных данных. Пользуясь этим сайтом, вы соглашаетесь с правилами использования сайта. Подробнее

Цитата дня

Vivazzi.ru

Личный сайт Мальцева Артема

Если ничего не помогает, прочтите документацию, наконец! (о программировании)
RaD

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

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 оценка)

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

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

Автор статьи

Права на использование данной статьи, расположенной на настоящей странице http://vivazzi.ru/it/justify-blocks/:

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

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

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

Вам нужно саморазвиваться или вы хотите зарабатывать деньги?

Или вы ищите хорошие IT сервисы или книги? Сохраните свое время и взгляните на мою подборку рекомендаций, которыми постоянно пользуюсь.
Посмотреть рекомендации

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

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

Чтобы оставить комментарий от своего имени войдите или зарегистрируйтесь обычным способом или через социальные сети:

Отправить

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

Попробуйте