Чтобы создать боксы, расположенные в одной линии, можно использовать CSS свойство display с значением inline-block или flex. Оба подхода имеют свои особенности, и выбор зависит от требований и контекста вашего проекта.
1. Использование display: inline-block:
<style>
.box {
display: inline-block;
width: 200px;
height: 200px;
}
</style>
<div class="box" style="background-color: red;"></div>
<div class="box" style="background-color: blue;"></div>
<div class="box" style="background-color: green;"></div>
В этом примере все три <div> будут располагаться горизонтально в одной линии. Однако, при использовании display: inline-block, появляется небольшое избыточное пространство между элементами, известное как "Whitespace Gap". Чтобы избежать этого, можно простым образом удалить все пробелы между <div> элементами:
<div class="box" style="background-color: red;"></div><div class="box" style="background-color: blue;"></div><div class="box" style="background-color: green;"></div>
2. Использование display: flex:
<style>
.container {
display: flex;
}
.box {
width: 200px;
height: 200px;
}
</style>
<div class="container">
<div class="box" style="background-color: red;"></div>
<div class="box" style="background-color: blue;"></div>
<div class="box" style="background-color: green;"></div>
</div>
При использовании display: flex, все дочерние элементы .box будут автоматически располагаться в горизонтальной линии. Этот подход предлагает больше гибкости и контроля над размещением элементов, и может быть удобен для сложных макетов.
Оба примера создадут три квадратных бокса, расположенных рядом друг с другом. Вы можете настроить размеры, цвета и другие свойства боксов в соответствии с вашими требованиями. Не забывайте поместить код внутри тега <html>, а сам файл сохранить с расширением .html, чтобы браузер распознал его как HTML документ.