Сегодня мы рассмотрим очень простой элемент адаптивной верстки, такой, как текст в два столбца. Поняв смысл, вы сможете делать и три и четыре столбца, которые, достигая заданной минимальной ширины уходят вниз. Естественно, к тексту можно добавлять картинки, да и абсолютно любые элементы дизайна.
Естественно, в столбцы или колонки, можно добавлять не только текст, но и любой другой контент. Еще такую адаптивную верстку блоков называют плавающей. Из-за чего? Читайте дальше и все поймете.
Приведенные ниже примеры текста в два столбца растягиваются на всю ширину контейнера. В моем случае это примерная область контента в блогах 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; /* отступ слева */
}<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 разметка для адаптивных столбцов с картинками:
<!-- левая колонка -->
<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>
Здесь просто добавлены картинки.
Пример