Регистрация Войти
Вход на сайт
» » Колонки с разделительной линией между ними

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

Просмотров: 2281
Комментариев: 0
Версия для печати

В этом уроке создадим три колонки с текстом, между которыми будут располагаться две разделительные вертикальные линии (вариант газетных колонок с текстом).
Разделение колонок вертикальной линией пошло из верстки печатных изданий, где требовалось уместить максимум текста на ограниченной площади. Вертикальные линии направляют взгляд читателя, не позволяя перескакивать с одной колонки на другую. На веб-странице можно сделать аналогично, добавляя к нужному слою свойство border-left или border-right. Отступ между линией и текстом задается свойством padding для каждого слоя.
Из-за того, что содержимое слоев, а соответственно и высота колонок может существенно различаться, линии в одном месте будут короче, в другом длиннее. Чтобы это устранить, линию следует добавить слева и справа от колонки, а затем сместить колонки на толщину линии. Получится, что линии наложатся друг на друга и будет видна самая длинная из них.

Создадим три колонки с текстом, между которыми будут располагаться две разделительные вертикальные линии.

Разделение колонок вертикальной линией пошло из верстки печатных изданий, где требовалось уместить максимум текста на ограниченной площади. Вертикальные линии направляют взгляд читателя, не позволяя перескакивать с одной колонки на другую. На веб-странице можно сделать аналогично, добавляя к нужному слою свойство border-left или border-right. Отступ между линией и текстом задается свойством padding для каждого слоя.

Из-за того, что содержимое слоев, а соответственно и высота колонок может существенно различаться, линии в одном месте будут короче, в другом длиннее. Чтобы это устранить, линию следует добавить слева и справа от колонки, а затем сместить колонки на толщину линии. Получится, что линии наложатся друг на друга и будет видна самая длинная из них. Сам сдвиг происходит применением свойства margin-left, как показано в коде html-страницы ниже:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Колонки с разделительной линией между ними</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Колонки с разделительной линией между ними</title>
<style>
.container {
min-width: 550px; /* минимальная ширина колонок */
}
.col1, .col2, .col3 {
width: 145px; /* ширина колонок */
padding: 0 15px; /* поля по вертикали и горизонтали */
float: left; /* для состыковки колонок по горизонтали */
}
.col1, .col2 {
  border-right: 3px solid #666; /* линия справа (цвет и толщину можно менять) */
}
.col2, .col3 {
  margin-left: -3px; /* сдвигаем колонку влево (толщину можно менять) */
  border-left: 3px solid #666; /* линия слева (цвет и толщину можно менять) */
}
</style>
</head>
<body>
<div class="container">
<div class="col1">
Река Амазонка – одна из самых длинных рек в мире. Река расположена на севере Южной Америки, начиная с Анд в Перу, а заканчивает в Атлантическом океане на территории Бразилии. Длина реки Амазонка колеблется от 6259 до 6800 км по разным источникам.
</div>
<div class="col2">
Нил - самая длинная в мире река. Ее протяженность больше 6 700 км от истоков. Древнегреческий историк Геродот говорил, что "Египет - дар Нила", ведь в его долине живёт 95% населения страны. Здесь же сосредоточено всё сельское хозяйство – река даёт не только влагу, но и плодороднейшие почвы.
</div>
<div class="col3">
Ока — река в Европейской части России, крупнейший из правых притоков Волги. Река берёт начало из родника в селе Александровка Глазуновского района Орловской области, проходит по Среднерусской возвышенности, в верховьях имеет глубоко врезанную, преимущественно узкую речную долину...
</div>
</div>
</body>
</html> 


Получаем вот такой результат:

Три колонки с разделительными линиями


Рейтинг статьи:
  
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.
Оставить комментарий
Ваше имя: *
Ваш e-mail: *
Текст комментария:
Полужирный Наклонный текст Подчёркнутый текст Зачёркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите проверочный код (защита от спама):
код: ----