Чтобы разместить блоки div, вы можете использовать CSS-свойство "display" с значением "inline-block" или "flex". Рассмотрим оба подхода более подробно.
1. Размещение блоков div с использованием "display: inline-block":
<style>
.box {
display: inline-block;
width: 200px;
height: 200px;
background-color: #f1f1f1;
margin: 10px;
}
</style>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
В данном примере, мы используем класс ".box" и устанавливаем для него свойство "display: inline-block", что позволяет блокам div располагаться в строку друг за другом. Мы также определяем ширину, высоту и фоновый цвет для блоков.
2. Размещение блоков div с использованием "display: flex":
<style>
.container {
display: flex;
justify-content: space-between;
}
.box {
width: 200px;
height: 200px;
background-color: #f1f1f1;
margin: 10px;
}
</style>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
В этом примере, мы создаем контейнер с классом ".container" и устанавливаем свойство "display: flex", которое превращает его дочерние элементы в флекс-элементы. Мы также указываем свойство "justify-content: space-between", чтобы блоки div распределились равномерно по ширине контейнера с одинаковыми промежутками между ними.
Оба подхода позволяют эффективно разместить блоки div в требуемом порядке и фиксированном размере. В зависимости от ваших потребностей и требований, вы можете выбрать один из этих методов и настроить его дополнительно, если необходимо.