Три центрированные коробки рядом друг с другом html

Question

На моем сайте у меня есть строка ящиков, которые делятся по центру страницы. Я хотел бы поставить 4 из них рядом друг с другом в горизонтальной линии, и когда размер страницы изменится, он опустится до 3 рядом друг с другом, затем два, затем один.

Я собираюсь изменить размер окна, поэтому они подходят.

Сайт here
Вы можете использовать исходный код страницы, чтобы найти код и CSS можно найти here

Спасибо!

Answer 1

(или вы можете легко регулировать ширину экрана здесь: http://jsfiddle.net/swm53ran/359/)

.block { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: lightgray; 
 
} 
 
.container { 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
</div>

Answer 2

Используйте text-align: center; на контейнере, display: inline-block; на коробках и, возможно, установите минимальную ширину на контейнере.