Как сделать чтобы было по 2 блока на строке, а не сразу все 4?

от
prokoding.ru > HTML > Как сделать чтобы было по 2 блока на строке, а не сразу все 4?

Чтобы разместить по два блока на одной строке в HTML, вы можете использовать CSS свойство display и задать элементам нужный стиль. Вот пример кода:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Два блока на строке</title>
<style>
    .block {
        width: 50%;
        float: left;
        box-sizing: border-box;
        padding: 10px;
    }
</style>
</head>
<body>
    <div class="block" style="background-color: #f0f0f0;">
        <p>Блок 1</p>
    </div>
    <div class="block" style="background-color: #e0e0e0;">
        <p>Блок 2</p>
    </div>
    <div class="block" style="background-color: #d0d0d0;">
        <p>Блок 3</p>
    </div>
    <div class="block" style="background-color: #c0c0c0;">
        <p>Блок 4</p>
    </div>
</body>
</html>

В этом примере мы создали класс .block, который задает стили для каждого блока. Через свойство width: 50% мы указываем, что каждый блок должен занимать 50% ширины родительского контейнера. Свойство float: left выравнивает блоки горизонтально, по два на строке. С помощью box-sizing: border-box задаем, чтобы внутренние отступы и границы не изменяли ширину блока. каждый блок имеет паддинг, чтобы контент не прижимался к краям. В итоге, блоки 1 и 2 будут отображаться в одной строке, а 3 и 4 - в следующей строке.

Таким образом, вы можете легко разместить по два блока на одной строке в HTML с помощью CSS.