Как разместить блоки в один ряд?

Question

[Ivanushka255]

У меня должны быть три блока, которые располагаются в линию. Для этого я каждому элементу задаю display: inline-block.

1. Дальше в первом случае я пишу какой ширины должен быть родитель блоков (width: 1565px). После этого я задаю родителю padding'и с правой ли вой стороны в 40px. Результат: моим трем блокам по непонятной причине не хватает места и один из них располагается снизу.


Я пытаюсь дальше...
2. Я прописываю ширину больше, чем раньше и все три моих блока располагаются в одну линию, но не по центру, а слева.


Вот мой код
Чем можно объяснить такое поведение inline-block. Как исправить эту проблему? Заранее огромное спасибо.

P.S. Все делается четко по макету:
1) 1 изображение – 519px (всего 3 - 1557рх);
2) Между картинками отступ в 4рх (всего 2 - 8рх);
Итого: 1565рх.
margin, padding обнулены.

Comments

[alexalexes]

inline-block всего лишь располагает в линию элементы, у этого свойства нету задачи как-то выравнивать их.
Как выход, использовать flex блоки, там есть все "плюшки" по центрированию элементов относительно чего-либо, не придумывая костыли-контейнеры, если конечно, стоит задача сделать какой-то хитрый список элементов, а не просто выстроить их в линию.

Answer 1

[Андрей Иванов]

Помести нужные тебе блоки в один блок со свойствами:
display: flex
flex-direction: row