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

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

09.01.2017

797

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

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

Данный способ отличается относительной легкостью реализации. Отпадает необходимость подключения скрипта для выравнивания высоты блоков, правда только в том случае если у блоков нет точных границ заливки фона или 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%}

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Галерея изображений Masonry

Галерея изображений Masonry

Masonry — это принцип построения изображений (блоков) занимая все пространство, по аналогии со строительной кладкой. Галерея изображений Masonry jquery Вставляем изображения в общий div с классом grid, каждое изображение в Читать далее »

/
Responsive block’s

Responsive block’s

Это эксперимент по складываю блоков при разном разрешении экрана и в различных устройствах. Это очень сырое решение, не рекомендую применять на реальных сайтах. Данное тестирование лучше всего проводить с помощью Читать далее »

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

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

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

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

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

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