Адаптивные три колонки на CSS

tigra1986

Создатель
Регистрация
11 Авг 2013
Сообщения
33
Реакции
3
Всем привет!

Есть адаптивные две колонки Для просмотра ссылки Войди или Зарегистрируйся

Помогите пожалуйста сделать точно такие же три колонки.

Код под спойлером и по ссылке выше
HTML



<div class="container">

<h1>Текст в два столбца</h1>



<!-- НАЧАЛО -->

<!-- левая колонка -->

<div class="left-col">

<p>Равным образом дальнейшее развитие различных форм деятельности способствует подготовки и реализации направлений прогрессивного развития. С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет оценить значение дальнейших направлений развития. Разнообразный и богатый опыт рамки и место обучения кадров в значительной степени обуславливает создание дальнейших направлений развития.</p>

</div>



<!-- правая колонка -->

<div class="right-col">

<p>Равным образом дальнейшее развитие различных форм деятельности способствует подготовки и реализации направлений прогрессивного развития. С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет оценить значение дальнейших направлений развития. Разнообразный и богатый опыт рамки и место обучения кадров в значительной степени обуславливает создание дальнейших направлений развития.</p>

</div>

<!-- отмена float -->

<div class="clearfix"></div>

<!-- ОКОНЧАНИЕ -->



<h1>Текст в два столбца c картинками</h1>



<!-- НАЧАЛО -->

<!-- левая колонка -->

<div class="left-col">

<img src="Для просмотра ссылки Войди или Зарегистрируйся" alt="..." class="img-responsive">

<p>Равным образом дальнейшее развитие различных форм деятельности способствует подготовки и реализации направлений прогрессивного развития. С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет оценить значение дальнейших направлений развития. Разнообразный и богатый опыт рамки и место обучения кадров в значительной степени обуславливает создание дальнейших направлений развития.</p>

</div>



<!-- правая колонка -->

<div class="right-col">

<img src="Для просмотра ссылки Войди или Зарегистрируйся" alt="..." class="img-responsive">

<p>Равным образом дальнейшее развитие различных форм деятельности способствует подготовки и реализации направлений прогрессивного развития. С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет оценить значение дальнейших направлений развития. Разнообразный и богатый опыт рамки и место обучения кадров в значительной степени обуславливает создание дальнейших направлений развития.</p>

</div>

<!-- отмена float -->

<div class="clearfix"></div>

<!-- ОКОНЧАНИЕ -->





</div>







CSS



.container {

max-width: 640px;

margin: 0 auto;

padding: 20px;

}

/* Отсюда копируйте стили */

.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; /* отступ слева */

}



/*Стили для адаптивных картинок*/

.img-responsive{

display: block;

max-width: 100%; /* ширина, размеры в процентах*/

height: auto;

margin: 20px 0px; /* отступы сверху и снизу */

background: #fff; /* для красоты цвет заполнения */

padding: 4px; /* для красоты внутренние отступы */

border: 1px solid #ddd; /* для красоты рамка серым цветом */

}



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

}
 

Bleem Cave

Писатель
Регистрация
14 Апр 2016
Сообщения
1
Реакции
1
i have seen lots of this kind of things i dont even know what to do about it
 

Alekxander

Постоялец
Регистрация
3 Янв 2018
Сообщения
367
Реакции
140
А если контейнерам задать ширину 33% ?
 

ubloggi

Создатель
Регистрация
6 Июл 2012
Сообщения
10
Реакции
6
почему не воспользоваться бутстрапом ?
 

tigra1986

Создатель
Регистрация
11 Авг 2013
Сообщения
33
Реакции
3
почему не воспользоваться бутстрапом ?
А это как? (хотя в двух словах)
Я на сайте с CMS MODX и есть пару сайтов на Joomla - публикую таким образом контент - смотрится хорошо и сразу адаптивный.

Вот возникла необходимость в трех колонках.
 

x5d6

Писатель
Регистрация
16 Янв 2014
Сообщения
9
Реакции
0
Узнайте что такое bootstrap, вам очень поможет.
 

Sergey97

Создатель
Регистрация
21 Июн 2017
Сообщения
11
Реакции
0
Лучше сделать через css grid, в 3 строчки буквально сделается все + на адаптив пару
 

Nick_Lock

Писатель
Регистрация
5 Июн 2017
Сообщения
1
Реакции
0
И так, привет, хочу провести бартер с тобой.

Советую использовать grid
Для просмотра ссылки Войди или Зарегистрируйся

Для просмотра ссылки Войди или Зарегистрируйся
В замен прошу дать новую версию DLE :), буду очень благодарен) (блэт, не увидел когда создали тему :с )
 
Сверху