Есть несколько способов разместить текст и div на одной строке. Вот основные варианты:

Способ 1: Использование flexbox (рекомендуемый)

<div class="first" style="display: flex; align-items: center; gap: 10px;">
    Текст
    <div class="second">Содержимое второго div</div>
</div>Code language: HTML, XML (xml)

Способ 2: Использование inline-block

<div class="first">
    <span>Текст</span>
    <div class="second" style="display: inline-block;">Содержимое второго div</div>
</div>Code language: HTML, XML (xml)

Способ 3: Использование float

<div class="first">
    Текст
    <div class="second" style="float: right;">Содержимое второго div</div>
</div>Code language: HTML, XML (xml)

Способ 4: CSS Grid

<div class="first" style="display: grid; grid-template-columns: auto auto; align-items: center; gap: 10px;">
    <span>Текст</span>
    <div class="second">Содержимое второго div</div>
</div>Code language: HTML, XML (xml)

Полный пример с CSS классами:

<style>
    .first {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        border: 1px solid #ccc;
    }

    .second {
        background-color: #f0f0f0;
        padding: 5px 10px;
        border-radius: 4px;
    }
</style>

<div class="first">
    Текст перед div
    <div class="second">Второй блок</div>
</div>Code language: HTML, XML (xml)

Рекомендую использовать первый способ с flexbox — он наиболее современный и гибкий для подобных задач.

От admin

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *