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

vave

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

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

16rjHCCvpOQ.jpg
 
В бутстрап есть такие штуки. col-md-4, например

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

И clear: left

+ ставят для телефонов:
@media (max-width: 700px){
.block {
width: 100%
}
}
 
Скажите пожалуйста, как сделать такие столбики в CSS? (черные рамки не нужны)
Метод в table не походит, так как wordpress своими стилями шаблонов, сильно искажает результат.

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

16rjHCCvpOQ.jpg
Предполагаю что в данном случае вам необходимо создать конструкцию состоящую из DIV. Кроме того обернуть её в DIV с шириной max-width: 100%.
Далее каждому отдельному блоку DIV с помещенной в него картинкой задать позиционирование и ширину в процентах.
В этом случае картинки будут помещаться на всю ширину экрана.
 
Предполагаю что в данном случае вам необходимо создать конструкцию состоящую из DIV. Кроме того обернуть её в DIV с шириной max-width: 100%.
Далее каждому отдельному блоку DIV с помещенной в него картинкой задать позиционирование и ширину в процентах.
В этом случае картинки будут помещаться на всю ширину экрана.
Да это не столь сложно, как разместить одну большую картинку слева, а 4 более мелких справа
 
Последнее редактирование:
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;
}
 
я бы использовал bootstrap4 и там есть демо как работают различные колонки, адаптивно и удобно
 
Такое сейчас легко делается на гридах Для просмотра ссылки Войди или Зарегистрируйся в примере на экране ниже 700 пикселей блоки становятся друг под друга
--------------------------------------------
И более надежный способ на флексах Для просмотра ссылки Войди или Зарегистрируйся если конечно возможна такая разметка


 
Подключите bootstrap4 и будет вам счастье
 
Подключите bootstrap4 и будет вам счастье
Серьезно? Теме уже год, уж не думаю что автор ждал твоего ответа :D
Причем есть решение куда адекватней- использование css grid с картинками в background, инфа: Для просмотра ссылки Войди или Зарегистрируйся
 
Назад
Сверху