Адаптивно оформление

Интернет дайджест за уебмастъри и фотографи

Днес ще разгледаме един много елементарен отзивчив елемент на оформление като текст в две колони. След като разберете значението, ще можете да направите както три, така и четири колони, които, достигайки определената минимална ширина, слизат надолу. Естествено, можете да добавите снимки към текста и абсолютно всякакви елементи на дизайна.
Естествено, в колони или колони можете да добавяте не само текст, но и всяко друго съдържание. Този тип адаптивно оформление на блока се нарича още плаващ. Заради какво? Прочетете и ще разберете всичко.
Следващите примери за текст в две колони се простират до пълната ширина на контейнера. В моя случай това е примерна област на съдържание в блоговете на WordPress.

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

Е, нека разберем много прост код за адаптивно оформление на две колони.
Тук донасям HTML изходен текст в две колони:

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

div class = "right-col" - дясна колона с клас .right-col

div class = "clearfix" - специален блок за отмяна на плувки. Вижте по-нататък.

CSS код за отзивчиво оформление на текст в две колони:

.left-col и .right-col ширината не е фиксирана, но в проценти - ширина: 50%; относително, за да накарат колоните да се простират спрямо ширината на контейнера.

Но когато достигне 180px, всяка колона вече не се свива.
минимална ширина: 180px; - задайте минималния размер на колоните.

---