Stfw.RuКак сделать колонки с разделительной линией между ними?
🕛 19.01.2009, 20:51
Разделение колонок вертикальной линией пошло из верстки печатных изданий, где требовалось уместить максимум текста на ограниченной площади. Вертикальные линии направляют взгляд читателя, не позволяя перескакивать с одной колонки на другую. На веб-странице можно сделать аналогично, добавляя к нужному слою атрибут border-left или border-right. Отступ между линией и текстом задается атрибутом padding для каждого слоя.Из-за того, что содержимое слоев, а соответственно и высота колонок может существенно различаться, линии в одном месте будут короче, в другом длиннее. Чтобы это устранить, линию следует добавить слева и справа от колонки, а затем сместить колонки на толщину линии. Получится, что линии наложатся друг на друга и будет видна самая длинная из них. Сам сдвиг происходит за счет использования атрибута margin-left, как показано в примере 1.
Пример 1. Колонки с линиями
HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <title>Линия у колонок</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style type="text/css"> #container { min-width: 510px; /* Минимальная ширина колонок */ } #col1, #col2, #col3 { width: 150px; /* Ширина колонок */ padding: 0 7px; /* Поля по вертикали и горизонтали */ float: left; /* Состыковка колонок по горизонтали */ } #col1, #col2 { border-right: 1px solid #000; /* Параметры линии справа */ } #col2, #col3 { margin-left: -1px; /* Сдвигаем колонку влево */ border-left: 1px solid #000; /* Параметры линии слева */ } </style> </head> <body> <div id="container"> <div id="col1"> Раньше ученые полагали, что колба Клязина синтезирует азид ртути, минуя жидкое состояние. Индуцированное соответствие взрывоопасно модифицирует анод, хотя этот факт нуждается в дальнейшей тщательной экспериментальной проверке. </div> <div id="col2"> Полисахарид затрудняет гетероциклический енамин, но никакие ухищрения экспериментаторов не позволят понять сложную цепочку превращений. Многочисленные расчеты предсказывают, а эксперименты подтверждают, что пигмент термически экранирует супрамолекулярный ансамбль вне зависимости от самосборки кластеров. </div> <div id="col3"> Учитывая значение электроотрицательностей элементов, можно сделать вывод, что енамин выделяет твердый ионообменник, что указывает на завершение процесса адаптации. Сворачивание проникает валентный электрон, поэтому перед употреблением взбалтывают. </div> </div> </body>
</html>
Поскольку в нашем случае линии нужны только между колонок, то атрибут border-right добавляется к первой и второй колонке. Аналогично, border-left добавляется ко второй и третьей колонке. При этом они смещаются вправо на один пиксел за счет использования атрибута margin-left с отрицательным значением.
Наилучший результат получается со сплошными линиями (значение solid), пунктирная граница (значение dashed) за счет наложения неодинаково отображается в разных браузерах.