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

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

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

Приведенные ниже примеры текста в два столбца растягиваются на всю ширину контейнера. В моем случае это примерная область контента в блогах 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; /* отступ слева */
}

/*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

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

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

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

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

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

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

 <!-- левая колонка -->
<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>

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

http://govoritel.ru/ обычный поясной громкоговоритель.

Похожие по Тегам статьи

Создание Video Background HTML 5

В данной статье идет речь о создании video background — фоновой видео заставки HTML 5 веб страницы

Оформление текста в HTML — Выноски Callout

Публикую несколько примеров оформления текста в HTML. Выноски Callout нужны для заострения внимания читателя…

Слайдер Bootstrap Ken Burns Effect Carousel

Собрал слайдер Bootstrap Ken Burns Effect Carousel и теперь делюсь с читателями своего сайта….