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


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

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

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

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

Текст в два столбца из редактора WordPress

Я брал сниппет из примера и просто ставил его путем копипаста через встроенный редактор WordPress в публикацию, все отлично работает. Только редактор нужно переключать в режим HTML

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

текст в два столбца

Скачать

Можно добавить кнопку в редактор

Чтобы не прописывать код текста в два столбца каждый раз вручную можно один раз добавить кнопку в текстовый редактор 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>

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

Сделайте свой сайт адаптивным ! Не можете сами? Воспользуйтесь моими недорогими услугами. Просто заполните контактную форму и через пару дней Ваш сайт станет адаптированным под все разрешения мониторов !


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


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