Как правильно разместить 4 div элемента в заданном формате?

Question

Zoey

верстка , css , html

Как правильно разместить 4 div элемента в заданном формате?

Как правильно разместить четыре блока, как показано на фотографии ниже? <br/><br/>

5 октября 2024 г. 9:34

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для того чтобы правильно разместить четыре `div` элемента в заданном формате, вы можете использовать CSS Flexbox или CSS Grid. Ниже приведены примеры для обоих случаев.

### Использование Flexbox

Если вы хотите расположить четыре блока в строку, можно воспользоваться Flexbox:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between; /* Распределение пространства между элементами */
            flex-wrap: wrap; /* Позволяет элементам переноситься на новую строку */
        }
        .box {
            width: 45%; /* Ширина блока - 45% от родительского контейнера */
            height: 100px; /* Высота блока */
            background-color: #f2f2f2; /* Цвет фона блока */
            margin: 10px; /* Отступы между блоками */
            display: flex;
            justify-content: center; /* Центрирование содержимого по горизонтали */
            align-items: center; /* Центрирование содержимого по вертикали */
            border: 1px solid #ccc; /* Рамка блока */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
</body>
</html>
```

### Использование Grid

Если вам удобнее использовать CSS Grid, вот пример:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Example</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* Две колонки одинаковой ширины */
            gap: 10px; /* Отступы между блоками */
        }
        .box {
            height: 100px; /* Высота блока */
            background-color: #f2f2f2; /* Цвет фона блока */
            display: flex;
            justify-content: center; /* Центрирование содержимого по горизонтали */
            align-items: center; /* Центрирование содержимого по вертикали */
            border: 1px solid #ccc; /* Рамка блока */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
</body>
</html>
```

Выберите подходящий для вас вариант в зависимости от вашего дизайна и требований. Оба примера обеспечат размещение блоков в нужном формате.