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

Тема в разделе "Другие языки", создана пользователем tigra1986, 22 авг 2018.

XEvil 4.0 Релиз Состоялся!
  1. tigra1986

    tigra1986 Создатель

    Регистр.:
    11 авг 2013
    Сообщения:
    33
    Симпатии:
    3
    Всем привет!

    Есть адаптивные две колонки https://codepen.io/vavik96/pen/meEvqR

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

    Код под спойлером и по ссылке выше
    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="http://filwebs.ru/example/two-col/img/8.jpg" alt="..." class="img-responsive">

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

    </div>



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

    <div class="right-col">

    <img src="http://filwebs.ru/example/two-col/img/7.jpg" 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;

    }
     
  2. Bleem Cave

    Bleem Cave Писатель

    Регистр.:
    14 апр 2016
    Сообщения:
    1
    Симпатии:
    1
    i have seen lots of this kind of things i dont even know what to do about it
     
    tigra1986 нравится это.
  3. Alekxander

    Alekxander

    Регистр.:
    3 янв 2018
    Сообщения:
    187
    Симпатии:
    51
    А если контейнерам задать ширину 33% ?
     
    tigra1986 нравится это.
  4. ubloggi

    ubloggi Создатель

    Регистр.:
    6 июл 2012
    Сообщения:
    10
    Симпатии:
    5
    почему не воспользоваться бутстрапом ?
     
    tigra1986 нравится это.
  5. tigra1986

    tigra1986 Создатель

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

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

    tigra1986 Создатель

    Регистр.:
    11 авг 2013
    Сообщения:
    33
    Симпатии:
    3
    О спасибо - работает! Как то я сам не догадался....
     
  7. crycode

    crycode Писатель

    Регистр.:
    11 сен 2018
    Сообщения:
    6
    Симпатии:
    1
    Для точности в px, лучше 33.3333333% использовать)
     
  8. x5d6

    x5d6 Писатель

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

    Sergey97 Писатель

    Регистр.:
    21 июн 2017
    Сообщения:
    9
    Симпатии:
    0
    Лучше сделать через css grid, в 3 строчки буквально сделается все + на адаптив пару
     
  10. Nick_Lock

    Nick_Lock Писатель

    Регистр.:
    5 июн 2017
    Сообщения:
    1
    Симпатии:
    0