/ Дизайн / Легкая верстка блоков

Легкая верстка блоков

HIT

09.01.2017

1923

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

Легкая верстка блоков

Данный способ отличается относительной легкостью реализации. Отпадает необходимость подключения скрипта для выравнивания высоты блоков, правда только в том случае если у блоков нет точных границ заливки фона или border’а. Не нужно ставить счетчик с проверкой какая по счету запись. При данной верстке легко адаптировать стили под любые устройства.

Прописываем повторяющимся блокам свойства:

.ternary {
    display: inline-block;
    position: relative;
    width: 31%;
    margin-right: 2%;
    margin-bottom: 30px;
    vertical-align: top;
}

display: inline-block; — является ключевым, т.к. он делает блоки «строчными» и складывает их один за одним слева направо сверху вниз
width: 31%; — необходимая ширина (для мобильных версий будем изменять этот параметр)
margin-right: 2%; margin-bottom: 30px; — делаем отступы только направо и вниз
vertical-align: top; — нужен для правильного выравнивания блоков по вертикали

Мы выровняли все блоки, но у правых блоков в каждом ряду есть отступ. Избавляемся от него — .ternary:nth-child(3n) {margin-right: 0;}

Принцип действия и вариации

Эффективно использовать данную верстку таким образом:

Если нам нужно выстроить блоки по 4 в ряд оборачиваем цикл в определенный класс, например .quaternion и задаем ему соответствующие параметры

.quaternion {
    display: inline-block;
    position: relative;
    width: 23%;
    margin-right: 2%;
    margin-bottom: 30px;
    vertical-align: top;
}

.quaternion:nth-child(4n) {margin-right: 0;}

Если нам нужно выстроить блоки по 3 в ряд оборачиваем цикл в определенный класс, например .ternary, задав ему соответствующие параметры и т.д.

Есть некоторые нюансы использования свойства inline-block. Например, между элементами появляется пробел! Как от этого избавиться (пункт 12)

Адаптивность

При этом так же гибко можно настроить варианты для планшета и мобильных устройств. Только для этого нужно стиль последнего элемента (:nth-child) выводить с проверкой

@media (min-width:800px) { .ternary:nth-child(3n) {margin-right: 0;} }

Чтобы при последующих медиазапросах не нужно было переназначать его.

Размеры блоков при формировании верстки плиткой

Верстка товаров Woocommerce

Убираем закрывающий тег li у товаров. И прописываем такие стили:

.woocommerce ul.products {
    border: solid #e9eaec;
    border-width: 0 0 0 1px;
    overflow: hidden;
    padding-bottom: .1rem;
	float: left;
    width: 100%;
}  

.woocommerce ul.products li.product {
    border: solid #e9eaec;
    border-width: 1px 1px 1px 0;
    box-sizing: border-box;
    background: #fff;
    padding: 5px 5px 0 5px;
    list-style: none;
    text-align: center;
    width: 25%;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin-bottom: -.1rem;
}

Если для шаблона архивов надо изменить количество товаров в ряду добавляем

.tax-product_cat.woocommerce ul.products li.product, 
.tax-product_tag.woocommerce ul.products li.product {
    width: 33.33%;
}

Это стили для вывода товаров через шорткоды

.woocommerce.columns-1 ul.products li.product {width:100%; margin-right:0}
.woocommerce.columns-2 ul.products li.product {width:48%}
.woocommerce.columns-3 ul.products li.product {width:33.33%}
.woocommerce.columns-5 ul.products li.product {width:16.95%}
.woocommerce.columns-6 ul.products li.product {width:13.5%}

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Блочная верстка сайта

Блочная верстка сайта

Сайт должен верстаться по сетке блоками. При использовании сетки разметка сайта выглядит гармонично. Предлагаю свой простой вариант верстки блоков. Для добавления блоков, используйте тэги <div class="box"> <div class="block-1">Содержимое</div> — ширина Читать далее »

Верстка типовых блоков

Верстка типовых блоков

Находим оптимальные решения верстки типовых блоков, т.е. конструкций которыми на различных сайтах приходиться пользоваться часто. Изображение текст Очень часто используется связка «изображение + текст»: списки статей, перечисление преимуществ, опции, достопримечательности Читать далее »

Первая последняя записи в ряду

Первая последняя записи в ряду

Добавляем классы для первых и последних записей в ряду. Вариант 1: Глобально, в файле функций Вставляем в файл functions.php. В данном примере разделение по 4 записи в ряду. add_filter('post_class', 'dobavit_pervii_klass'); Читать далее »

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

Пока нет комментариев. Будь первым!

Легкая верстка блоков Легкая верстка блоков
Платежная система PayKeeper
Рекомендации для васПлатежная система PayKeeperOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.