Несколько колонок на 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
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
"Самый чепуховый и бесперспективный проект, но уже запущенный и работающий в Сети, принесет гораздо больше результатов и прибыли, чем самый совершенный проект, который из-за своего постоянного предстартового совершенствования никогда не будет запущен." |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.