Иллюстрация



Иллюстрация 6

Example of vertically aligning the cells
   [D]

Диаграмма показывает действие различных значений 'vertical-align' в ячейках таблицы.

Боксы ячеек 1 и 2 выровнены по их базовым линиям. Бокс ячейки 2 имеет бoльшую высоту относительно базовой линии и поэтому определяет базовую линию ряда. Заметьте, что если нет ни одного бокса ячейки, выровненного по базовой линии, у ряда не будет (не нужна) базовой линии.

Чтобы исключить неоднозначные ситуации, выравнивание ячеек происходит в следующем порядке:

  1. Сначала позиционируются ячейки, выровненные по их базовым линиям. Это устанавливает базовую линию ряда. Затем позиционируются ячейки с 'vertical-align: top'.
  2. Ряд имеет теперь верх, возможно - базовую линию и предварительную высоту, которая является расстоянием от верха (таблицы) до низа самой нижней ячейки. (См. ниже условия для заполнения ячеек.)
  3. Если какая-либо из оставшихся ячеек, выровненных по низу или по середине, имеет высоту большую, чем текущая высота ряда, то высота ряда будет увеличена до максимума этой ячейки путём опускания низа (таблицы).
  4. Наконец, позиционируются оставшиеся ячейки.

Боксы ячеек, которые меньше, чем высота ряда, получают дополнительное заполнение вверху или внизу.



- Начало - - Назад - - Вперед -


Книжный магазин