Как сделать такие столбики в CSS

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

Модераторы: Цукер
  1. vave

    vave

    Регистр.:
    23 июн 2007
    Сообщения:
    424
    Симпатии:
    16
    Скажите пожалуйста, как сделать такие столбики в CSS? (черные рамки не нужны)
    Метод в table не походит, так как wordpress своими стилями шаблонов, сильно искажает результат.

    Кстати очень важно что бы изображения растягивались, во всю ширину экрана.

    [​IMG]
     
  2. Q_BASIC

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    445
    Симпатии:
    1.157
    В бутстрап есть такие штуки. col-md-4, например

    Делается с помощью
    width: 33.3333%
    width: 66.3333%
    width: 50%

    И clear: left

    + ставят для телефонов:
    @media (max-width: 700px){
    .block {
    width: 100%
    }
    }
     
    dana77 и DJ PROMO нравится это.
  3. DJ PROMO

    DJ PROMO Постоялец

    Регистр.:
    9 июл 2017
    Сообщения:
    77
    Симпатии:
    21
    Предполагаю что в данном случае вам необходимо создать конструкцию состоящую из DIV. Кроме того обернуть её в DIV с шириной max-width: 100%.
    Далее каждому отдельному блоку DIV с помещенной в него картинкой задать позиционирование и ширину в процентах.
    В этом случае картинки будут помещаться на всю ширину экрана.
     
  4. vave

    vave

    Регистр.:
    23 июн 2007
    Сообщения:
    424
    Симпатии:
    16
    Да это не столь сложно, как разместить одну большую картинку слева, а 4 более мелких справа
     
    Последнее редактирование: 10 апр 2018
  5. Red[S1]

    Red[S1] Создатель

    Регистр.:
    15 мар 2012
    Сообщения:
    10
    Симпатии:
    13
    HTML:
    <div class='main'>
      <div class='first red'></div>
      <div class='second blue'></div>
      <div class='second black'></div>
      <div class='second white'></div>
      <div class='second green'></div>
    </div>
    HTML:
    
    .main {
      overflow: hidden;
    }
    .first,
    .second {
      float: left;
      width: 33.33%;
    }
    .first {
      height: 300px;
    }
    .second {
      height: 150px;
    }
    .red,
    .blue,
    .black,
    .white,
    .green{
      background-image: url('ссылка на изображение');
      background-size: cover;
      background-position: center center;
    }
    
     
  6. VladimirPutin

    VladimirPutin Создатель

    Регистр.:
    20 мар 2017
    Сообщения:
    19
    Симпатии:
    2
    я бы использовал bootstrap4 и там есть демо как работают различные колонки, адаптивно и удобно
     
  7. L2Banners

    L2Banners Создатель

    Регистр.:
    15 сен 2017
    Сообщения:
    47
    Симпатии:
    17
    Такое сейчас легко делается на гридах https://jsfiddle.net/w0s4xmc0/29466/ в примере на экране ниже 700 пикселей блоки становятся друг под друга
    --------------------------------------------
    И более надежный способ на флексах https://jsfiddle.net/l2banners/kxg24rja/ если конечно возможна такая разметка