Есть несколько способов разместить текст и 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 — он наиболее современный и гибкий для подобных задач.
