Может ли кто-нибудь сказать мне, как я могу создавать div в одной строке, даже если они являются блочными элементами?

Question

Меня попросили создать мои div горизонтально (синий, желтый, красный). Однако я понял, что могу сделать это без изменения свойства отображения. Может ли кто-нибудь сказать мне, как это возможно? Вот мой html код

<div class="red">
</div>

<div class="blue">
</div>

<div class="yellow">
</div>

Вот мой CSS код

.red
{
    height:100px; 
    width:100px;
    background-color:red; 
    position:relative;
    left:200px;

}
.blue
{
    height:100px;
    width:100px;
    background-color:blue; 
    position:relative;
    bottom:100px;

}
.yellow
{
    height:100px; 
    width:100px;
    background-color:yellow; 
    position:relative;
    left:100px;
    bottom:200px;

}

Answer 1

Измените порядок для достижения результата [(1) синий (2) желтый (3) красный]

Вы можете просто добавить свойство float, которое даст вам желаемый результат без каких-либо изменений в display properties или вы даже можете использовать display: inline-block; для желаемых результатов ...

с display: inline-block;

.red
{
    height:100px; 
    width:100px;
    background-color:red; 
    display: inline-block;

}
.blue
{
    height:100px;
    width:100px;
    background-color:blue; 
    display: inline-block;

}
.yellow
{
    height:100px; 
    width:100px;
    background-color:yellow; 
    display: inline-block;

}

<div class="blue">
</div>

<div class="yellow">
</div>

<div class="red">
</div>

с float: left;

.red
{
    height:100px; 
    width:100px;
    background-color:red; 
    float: left;
}
.blue
{
    height:100px;
    width:100px;
    background-color:blue; 
    float: left;
}
.yellow
{
    height:100px; 
    width:100px;
    background-color:yellow; 
    float: left;
}

<div class="blue">
</div>

<div class="yellow">
</div>

<div class="red">
</div>

с положение: абсолютное;

.red
{
    height:100px; 
    width:100px;
    background-color:red; 
    position: absolute;
    left: 200px;
}
.blue
{
    height:100px;
    width:100px;
    background-color:blue; 
    position: absolute;
}
.yellow
{
    height:100px; 
    width:100px;
    background-color:yellow; 
    position: absolute;
    left: 100px;
}

<div class="blue">
</div>

<div class="yellow">
</div>

<div class="red">
</div>

Хорошего дня !!!
С уважением,
Ом Чаудхари

Answer 2

Если вы хотите узнать о поведении кода, который вы добавили с вопросом, то в основном то, что вы сделали, для достижения цели используется свойство css position. Существует 5 типов positions в css, которые:

static relative absolute fixed sticky

, и если вы установите для любого из этих свойств значение элемент html, то вы можете контролировать его положение, используя координаты слева, справа, сверху и снизу.

Подробнее об этих можно узнать здесь

Но это не лучший вариант Практика использовать их для позиционирования элементов, если это не требуется потоком и не может быть достигнуто другими методами, например, в вашем коде вы можете легко достичь результата, используя css Flexbox, здесь - отличный ресурс для изучения flexbox.

Надеюсь, он очистит ваш запрос.

Answer 3

один из способов сделать это - добавить родительский div и использовать flex-box, чтобы встроить их, используя flex-direction: row (по умолчанию, поэтому вам не нужно устанавливать его по умолчанию, чтобы получить строку элементов)

.red
{
    height:100px; 
    width:100px;
    background-color:red; 
    position:relative;
    left:200px;

}
.blue
{
    height:100px;
    width:100px;
    background-color:blue; 
    position:relative;

}
.yellow
{
    height:100px; 
    width:100px;
    background-color:yellow; 
    position:relative;
    left:100px;

}
.flex-parent{
  display:flex;
  flex-direction:row;
}

<div class="flex-parent">
<div class="red">
</div>

<div class="blue">
</div>

<div class="yellow">
</div>
</div>