Wordpress. div. Как разместить блоки?

Question

[Виталий Чесноков]

Доброго и светлого дня!
Подскажите, пожалуйста, как выстроить картинки на странице, чтобы они располагались: 2 по горизонтали и 2 по вертикали.
Оговорюсь - я совсем не знаю языков и сопутствующей терминологии/сленга, потому, если не сложно, дайте, пожалуйста, готовый код и подскажите, куда его вставить.
Заранее, огромнейшее спасибо.

Answer 1

[Владимир Ио]

Для класса img-hover с css файле www.artfoli.ru/wp-content/themes/full-frame/style.css произведите изменения как на скриншоте:

Но если экран широкий, то чем шире, тем больше картинок будет умещаться.
Если это не нужно - оберните содержимое картинок в контейнер вроде:

<div style="width: 800px;text-align:center;">тут коды ваших слайдеров с картинками</div>

Он не даст поместиться 3-й картинке в ряд, т.к. ширина каждой у вас 350px.

Comments

[Виталий Чесноков]

Вот ведь красота! Спасибо, Владимир! Ваш ответ, пожалуй, самый толковый, наглядный и верный за всё время, что я получал.
Владимир, если не трудно, подскажите, пожалуйста, как увеличить расстояние между слайдерами? А то они получились впритык.

[Николай Шепелев]

MagnuMphoto: Я конечно не Владимир, но отвечу. Там же, в .img-hover { ... } добавьте margin: 0 10px 10px 0; . Задаёт соответственно отступы сверху, справа, снизу, слева.

[Владимир Ио]

MagnuMphoto: Все верно, смотрю уже применили)

[Виталий Чесноков]

Николай Шепелев: спасибо, Николай! Действительно сработало.
Только сейчас обратил внимание, что адаптивность шаблона ушла с закреплением 2 картинок в горизонтали. Т.е., просматривая с телефона, раньше не нужно было скролить горизонт, сейчас же приходится. Подскажите, пожалуйста, как вернуть "адаптивность", но чтобы при большом экране, всё же слайдеры были 2Х2?

[Виталий Чесноков]

Николай Шепелев: Ага, понял. А это возможно исправить?

[Николай Шепелев]

MagnuMphoto: Всё из-за фиксированной ширины и выравнивания по левой стороне, которую посоветовал использовать Владимир Ионов

[Владимир Ио]

MagnuMphoto: Легко. Измените предложенное мною ранее на style="max-width: 800px;text-align:center;width: 100%;"

[Николай Шепелев]

MagnuMphoto: Можно сделать так (если не править предыдущую муть): после .img-hover { ... } добавить

media screen and (max-width: 800px) {.img-hover {float: none;}}

Когда ширина меньше 800px применяется данный стиль.

[Виталий Чесноков]

Владимир Ионов: слайдеры выстроились в вертикаль.
Николай Шепелев: Что-то не сработало.
Похоже, я в обоих случаях, что-то не так делаю.

[Виталий Чесноков]

Владимир Ионов: всё, понял. Спасибо! Всё сработало.
Николай Шепелев: И вам огромное спасибо!
Сказать честно - диву даюсь, что люди помогают. Спасибо вам.

[Николай Шепелев]

MagnuMphoto: Перед media собачка стерлась:

@media screen and (max-width: 800px) {.img-hover {float: none;}}

[Виталий Чесноков]

Николай Шепелев: Сейчас выглядит так:
.img-hover {
media screen and (max-width: 800px) {.img-hover {float: none;}}
width: 350px;
height: 233px;
margin: 0 20px 20px 0;

Результат отсутствует. Что-то не так вставил?

[Николай Шепелев]

MagnuMphoto:

.img-hover {
width: 350px;
height: 233px;
margin: 0 20px 20px 0;
}
@media screen and (max-width: 800px) {
.img-hover {
float: none;
}
}

[Виталий Чесноков]

Николай Шепелев: спасибо!

Answer 2

[Пума Тайланд]

можете для блоков с картинкой просто добавить "float:left",
больше в двух в ряд не влезет
и получите желаемый результат