x
 
Радомир Купфер
13 июня 2013

Артём, можно ли заверстать несколько разноширинных элементов через равные промежутки в резиновом контейнере, пользуясь лишь ЦСС?



Можно, используя инлайн-блоки, выключку по ширине и хаки, чтобы работало везде:

<style>
  .ap-justify {
    text-align: justify;
    font-size: 0;
    line-height: 0;

    /* Для ИЕ 6 и 7 newspaper
       вместо justify */
    *text-justify: newspaper;

    /* В ИЕ не работает ap-example:after,
       зато есть text-align-last */
    *text-align-last: justify;
    *zoom:1;
  }
  .ap-justify li {
    /* Инлайн-блок */
    text-align: left;
    font-size: 13px;
    line-height: normal;
    display: inline-block;
    *display : inline;
    *zoom : 1;
    vertical-align: top;
    margin: 0 0 10px;
    padding: 10px 20px 12px;
    background: #fbfadc;
    border-radius: 2px;
  }
  .ap-justify:after {
    /* Заполняем последнюю строку пустотой,
       чтобы растягивалась первая */
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    visibility: hidden;
  }
</style>

<ul class="ap-justify">
  <li>Несколько</li>
  <li>разноширинных</li>
  <li>элементов</li>
</ul>
  • Несколько
  • разноширинных
  • элементов

  • Равные
  • промежутки
  • в резиновом
  • блоке


С флекс-боксом всё гораздо проще, но работает лишь в трети браузеров:

.ap-flex {
  /* Флекс */
  display: -webkit-flex;
  display: flex;

  /* Расстояние между блоками */
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.ap-flex li {
  /* Те же стили,
     что и для .ap-justify li */
}
  • Несколько
  • разноширинных
  • элементов

  • Равные
  • промежутки
  • в резиновом
  • блоке


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Гизар Ахатов
13 июня 2013

Первый вариант в Опере будет расползаться. Чтобы этого избежать, необходимо классу ap-justify задать font-size: 2px.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Сайты для слабовидящих 2 За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 С чего начать изучение ЦСС? 1 Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5