Колонки с разделительной линией

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

Рис. 2. Три колонки с разделительной линией

Для создания подобного макета понадобится три слоя, образующих колонки. Селекторы col1 и col2 создает линию справа от блока, применяя их к первому и второму слою, получим нужную черту. У третьей колонки линейка справа не нужна, поэтому добавляется еще один селектор col3 (файл sloi_26.html).

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

Величина отступов от текста до черты варьируется параметром padding. Через пробел указываются поля по вертикали и горизонтали, в примере верхнее и нижнее поле равно нулю, чтобы линия не выступала над текстом.