Несколько колонок на CSS3
Вам когда-нибудь надо было создавать многоколоночный шаблон для вывода информации? Чтобы было похоже на колонки в газете. Наверняка, да. Обычный способ реализации такой задачи - элементы разметки со свойством float: left. Но CSS3 предоставляет альтернативу. С ней не нужно резать информацию на блоки - несколько колонок формируются с помощью одного элемента.
В нашем примере используются свойства CSS3 column-count, column-gap и column-rule. Не все браузеры поддерживают данные свойства CSS3, но новые версии будут выводить все корректно. Наш пример будет выглядеть вот так:
Разметка HTML
Обычная разметка с одним элементом div для информации:
<!DOCTYPE html>
<html lang="ru" >
<head>
<meta charset="utf-8" />
<title>Несколько колонок на CSS3 | Материалы сайта RUSELLER.COM</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="controls">
<input type="button" id="more_cols" value="Добавить колонку" />
<input type="button" id="less_cols" value="Удалить колоноку" />
<input type="button" id="more_gap" value="Увеличить зазор" />
<input type="button" id="less_gap" value="Уменьшить зазор" />
</div>
<div class="container" id="container">
. . . Информация размещается здесь . . .
</div>
</body>
</html>
CSS
Контейнер для информации будет использовать три свойства, которые формируют несколько колонок:
.container {
background:#C5DFF0;
color:#000;
margin:20px auto;
padding:20px;
position:relative;
width:800px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:1px 1px 5px #111111;
column-count: 3;
column-gap: 3em;
column-rule: 1px dashed black;
-moz-column-count: 3;
-moz-column-gap: 3em;
-moz-column-rule: 1px dashed black;
-webkit-column-count: 3;
-webkit-column-gap: 3em;
-webkit-column-rule: 1px dashed black;
}
.controls {
background:#C5DFF0;
margin:20px auto;
padding:20px;
position:relative;
width:800px;
box-shadow:1px 1px 5px #111111;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.controls input[type=button] {
border: 1px solid #000;
background-color: #666;
box-shadow: 0 1px 0 rgba(150, 150, 150, 0.5);
color: #FFF;
cursor: pointer;
font-size: 14px;
font-weight: bold;
margin-right: 10px;
padding: 8px 12px;
}
.controls input[type=button]:hover {
background-color:#444;
}
.controls input[type=button]:active {
background-color:#000;
}
JavaScript
Код JavaScript используется для динамического изменения шаблона - добавления/удаления колонок, увеличение/уменьшения зазора между колонками.
$(function(){
var iColumns = 3;
var iGap = 3;
var cont = document.getElementById('container');
$('#less_cols').click(function(e) { // Обработка нажатия кнопки мыши
iColumns--; // Уменьшаем количество колонок
if (iColumns < 1) iColumns = 1;
cont.style.MozColumnCount = iColumns; // Применяем стили
cont.style.WebkitColumnCount = iColumns;
});
$('#more_cols').click(function(e) {
iColumns++; // Увеличиваем количество колонок
if (iColumns > 5) iColumns = 5;
cont.style.MozColumnCount = iColumns; // Применяем стили
cont.style.WebkitColumnCount = iColumns;
});
$('#less_gap').click(function(e) {
iGap--; // Уменьшаем размер зазора
if (iGap < 0) iGap = 0;
cont.style.MozColumnGap = iGap+'em'; // Применяем стили
cont.style.WebkitColumnGap = iGap+'em';
});
$('#more_gap').click(function(e) {
iGap++; // Увеличиваем размер зазора
if (iGap > 5) iGap = 5;
cont.style.MozColumnGap = iGap+'em'; // Применяем стили
cont.style.WebkitColumnGap = iGap+'em';
});
});
Комментарии:
Нету комментариев для вывода...