Чтобы упорядочить боксы так, чтобы они были расположены последовательно, можно использовать CSS Flexbox или CSS Grid.
С использованием Flexbox:
1. Создайте контейнер для боксов, например, элемент div с определенным классом или идентификатором.
2. Примените следующие стили к контейнеру:
```css
.container {
display: flex;
flex-direction: row; /* Устанавливает направление главной оси на горизонтальное */
}
```
3. Поместите боксы внутрь контейнера div. Каждый бокс будет автоматически расположен вдоль оси в горизонтальном порядке.
С использованием CSS Grid:
1. Создайте контейнер для боксов, например, элемент div с определенным классом или идентификатором.
2. Примените следующие стили к контейнеру:
```css
.container {
display: grid;
grid-template-columns: repeat(3, auto); /* Определяет размеры столбцов - в данном примере будет создано три столбца */
grid-gap: 10px; /* Определяет промежуток между элементами */
}
```
3. Поместите боксы внутрь контейнера div. Каждый бокс будет автоматически расположен в горизонтальных столбцах.
Чтобы изменить размещение элементов таким образом, чтобы кнопка располагалась возле строки поиска, а не справа от нее, вы можете использовать Flexbox с определенным порядком элементов.
1. Создайте контейнер для строки поиска и кнопки.
2. Примените следующие стили к контейнеру:
```css
.container {
display: flex;
flex-direction: row; /* Устанавливает направление главной оси на горизонтальное */
}
```
3. Поместите элементы строки поиска и кнопки внутрь контейнера div в порядке, в котором вы хотите их отображать.
4. Примените следующие стили к элементу кнопки:
```css
.button {
order: -1; /* Перемещает элемент в начало контейнера по оси главного порядка */
}
```
Теперь кнопка будет располагаться слева от строки поиска.
