Адаптивная верстка. Текст в два столбца.

Сегодня мы рассмотрим очень простой элемент адаптивной верстки, такой, как текст в два столбца. Поняв смысл, вы сможете делать и три и четыре столбца, которые, достигая заданной минимальной ширины уходят вниз. Естественно, к тексту можно добавлять картинки, да и абсолютно любые элементы дизайна.
Естественно, в столбцы или колонки, можно добавлять не только текст, но и любой другой контент. Еще такую адаптивную верстку блоков называют плавающей. Из-за чего? Читайте дальше и все поймете.
Приведенные ниже примеры текста в два столбца растягиваются на всю ширину контейнера. В моем случае это примерная область контента в блогах WordPress.

Адаптивная верстка. Текст в два столбца без картинок

Ну и давайте разберемся по очень простому коду адаптивной верстки двух столбцов.
Вот привожу исходник HTML текста в двух столбцах :

<!-- левая колонка -->
<div class="left-col">
  <p>Text, Text, Text,</p>
</div>

<!-- правая колонка -->
<div class="right-col">
    <p>Text, Text, Text,</p>
</div>

<!-- отмена float -->
<div class="clearfix"></div>

div class="left-col" — левая колонка с классом .left-col

div class="right-col" — правая колонка с классом .right-col

div class="clearfix" — специальный блок для отмены float. См. далее.

CSS код адаптивной верстки текста в два столбца:

.left-col, /* левая колонка */
.right-col/* правая колонка */
{
    width: 50%;    /* ширина */
    min-width: 180px;  /* минимальная ширина сужения */
    height: auto;  /* высота */
    box-sizing: border-box;
    float: left; /* плавающие блоки */
}
.left-col{
    padding-right: 10px; /* отступ справа */
}
.right-col{
    padding-left: 10px; /* отступ слева */
}<br>/*Cтили для маленьких мониторов*/
@media (max-width: 479px){
.left-col, /* левая колонка */
.right-col/* правая колонка */
    {
        width: 100%;    /* ширина */
    }
    .right-col{
        padding-left: 0px; /* отступ слева */
    }
}
/* clearfix сбрасывает float*/
.clearfix:after {
    content: " ";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.left-col и .right-col задается ширина не фиксированная, а в процентах — width: 50%; относительная для того, чтобы столбцы растягивались относительно ширины контейнера.

Но, при достижении 180px, каждый столбец больше не уменьшается.
min-width: 180px; — задан минимальный размер колонок.

Естественно, эти размеры можно менять по своему усмотрению. Три столбца, значит ставьте width: 33.3333%;.

height: auto; — высота адаптивных столбцов, она автоматически меняется в зависимости от объема контента в столбцах.

box-sizing: border-box; — желательно прописывать при адаптивной верстке. Свойство, при котором все отступы padding, рамки border и т.д, вписываются в заданный размер контейнера. В нашем случае .left-col и .right-col.

float: left; — свойство, при котором столбцы с текстом выстраиваются горизонтально по очереди. Количество столбцов зависит от заданных ранее относительных размеров. У нас width: 50%; — два столбца.

@media (max-width: 479px) — так называемая точка прерывания. Это значит, что на мониторах, менее 479px каждый столбец растянется на всю ширину монитора. В коде задано:

.left-col и .right-col {width: 100%;}

Рекомендовано использовать 4 точки прерывания, я беру точки от Bootstrap. Кому нужны, вот :

@media(max-width: 479px){

}

@media(max-width: 767px){

}

@media(max-width: 991px){

}

@media(max-width: 1199px){

}

@media(min-width: 480px){

}

@media(min-width: 768px){

}

@media(min-width: 992px){

}

@media(min-width: 1200px){

}

Сложно? Только на первый взгляд. Скачайте исходник и меняя параметры, посмотрите логику. Ну или просто скопируйте код исходника и замените текст на свой.

Адаптивная верстка. Текст в два столбца с картинками

Естественно, в адаптивные столбцы можно добавлять любые элементы. Рассмотрим пример добавления к адаптивным столбцам с текстом картинки.

Для начала сделаем сами картинки адаптивными. Для этого присвоим им какой-то класс и зададим ширину 100%.
Стили CSS для адаптивных картинок

/*Стили для адаптивных картинок*/
.img-responsive{
    display: block;
    max-width: 100%; /* ширина, размеры в процентах*/
    height: auto;
    margin: 20px 0px; /* отступы сверху и снизу */
    background: #fff; /* для красоты цвет заполнения  */
    padding: 4px;  /* для красоты внутренние отступы */
    border: 1px solid #ddd; /* для красоты рамка серым цветом */
}

Картинки желательно подбирать 500px в ширину, что-бы на маленьких мониторах они растягивались на всю ширину экрана и выглядели красиво.
HTML разметка для адаптивных столбцов с картинками:

&nbsp;<!-- левая колонка -->
<div class="left-col">
  <img src="img/8.jpg" alt="..." class="img-responsive">
  <p>.............</p>
</div>

<!-- правая колонка -->
<div class="right-col">
    <img src="img/7.jpg" alt="..." class="img-responsive">
    <p>...........</p>
</div>
<!-- отмена float -->
<div class="clearfix"></div>

Здесь просто добавлены картинки.
Пример




 

Источник