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

vave

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

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

16rjHCCvpOQ.jpg
 

Q_BASIC

Хранитель порядка
Регистрация
30 Ноя 2013
Сообщения
516
Реакции
1.239
В бутстрап есть такие штуки. col-md-4, например

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

И clear: left

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

DJ PROMO

Гуру форума
Регистрация
9 Июл 2017
Сообщения
125
Реакции
57
Скажите пожалуйста, как сделать такие столбики в CSS? (черные рамки не нужны)
Метод в table не походит, так как wordpress своими стилями шаблонов, сильно искажает результат.

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

16rjHCCvpOQ.jpg
Предполагаю что в данном случае вам необходимо создать конструкцию состоящую из DIV. Кроме того обернуть её в DIV с шириной max-width: 100%.
Далее каждому отдельному блоку DIV с помещенной в него картинкой задать позиционирование и ширину в процентах.
В этом случае картинки будут помещаться на всю ширину экрана.
 

vave

Полезный
Регистрация
22 Июн 2007
Сообщения
466
Реакции
16
  • Автор темы
  • Заблокирован
  • #4
Предполагаю что в данном случае вам необходимо создать конструкцию состоящую из DIV. Кроме того обернуть её в DIV с шириной max-width: 100%.
Далее каждому отдельному блоку DIV с помещенной в него картинкой задать позиционирование и ширину в процентах.
В этом случае картинки будут помещаться на всю ширину экрана.
Да это не столь сложно, как разместить одну большую картинку слева, а 4 более мелких справа
 
Последнее редактирование:

Red[S1]

Создатель
Регистрация
14 Мар 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;
}
 

VladimirPutin

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

Get-Web

Постоялец
Регистрация
15 Сен 2017
Сообщения
79
Реакции
28
Такое сейчас легко делается на гридах Для просмотра ссылки Войди или Зарегистрируйся в примере на экране ниже 700 пикселей блоки становятся друг под друга
--------------------------------------------
И более надежный способ на флексах Для просмотра ссылки Войди или Зарегистрируйся если конечно возможна такая разметка


 

Chesterfield25

Постоялец
Регистрация
5 Май 2019
Сообщения
77
Реакции
8
Подключите bootstrap4 и будет вам счастье
 

CHADREX

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