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

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

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

    vave

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

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

    [​IMG]
     
  2. Q_BASIC

    Q_BASIC

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

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

    И clear: left

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

    DJ PROMO Создатель

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

    vave

    Регистр.:
    23 июн 2007
    Сообщения:
    414
    Симпатии:
    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;
    }