Несколько колонок на 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';
    });
});

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/U9wwMdwlT84/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Несколько колонок на CSS3 | | 2012-06-24 16:22:21 | | Статьи Web-мастеру | | Вам когда-нибудь надо было создавать многоколоночный шаблон для вывода информации? Чтобы было похоже на колонки в газете. Наверняка, да. Обычный способ реализации такой задачи - элементы разметки со | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: