Восстановление вертикального ритма на странице после нечетного числа элементов - PullRequest
Новая
       30

Восстановление вертикального ритма на странице после нечетного числа элементов

4 голосов
/ 06 сентября 2011

Я пытаюсь построить макет из 2 столбцов с постоянным вертикальным ритмом (выровненные базовые линии).Расчеты для этого довольно просты, и у меня они работают нормально.Мой вопрос таков:

Когда два столбца текста располагаются рядом, возможно ли поддерживать вертикальный ритм (или восстанавливать его), если вертикальные поля в столбцах не являются «целыми строками».

В этом примере: http://jsfiddle.net/beejamin/PMCXt/ У меня есть неупорядоченный список, где и список, и элементы списка имеют «половину строки» поля margin-bottom.Когда есть четное количество элементов списка, поля складываются в целую строку, и ритм сохраняется (это хорошо!).Однако, если есть нечетное число, базовые линии отбрасываются и больше никогда не могут объединиться (если мне не повезет, и не появится другой нечетный список).

Установка целых полей в спискеПредметов слишком много (особенно с длинным списком), и установка без полей недостаточна.

Есть ли способ, которым я могу избежать / смягчить это?Я не буду знать количество строк заранее, и я не хочу использовать для этого javascript (я пытаюсь создать общую схему, которую я могу использовать повторно).

Ответы [ 2 ]

2 голосов
/ 07 сентября 2011

ОК, вот чистое решение CSS.Он использует селекторы: nth-child и: last-child, поэтому делать это могут только браузеры, которые поддерживают эти селекторы.Это достаточно хорошо для меня, потому что это действительно хороший кусок лака.Было бы достаточно просто подать заявку на старые браузеры с некоторым javascript.

Вот рабочий пример: http://jsfiddle.net/beejamin/DpSzW/

Ключ этого селектора: 

li:nth-child(odd):last-child { margin-bottom: 1.6em /* One full line */}

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

Когда список содержит четное количество элементов, селектор ничего не делает, и все остается хорошо.

0 голосов
/ 06 сентября 2011

Интересный вопрос!

Не уверен на 100%, поскольку я тестировал не во всех условиях, но, похоже, это работает.

  1. Оставьте line-height прежним.
  2. оставить margins таким же, как line-height.
  3. оставить font-size таким же.

Пример: http://jsfiddle.net/jasongennaro/PMCXt/1/

...