Html 为什么所有div都出现在彼此下面？

我问这个不是因为这对我来说是个问题，事实上，这正是我想要显示div的方式，但我不知道它们会出现在彼此下方。为什么呢？我只给出了它们的宽度和高度，没有对它们进行定位。 我以为他们会在同一个位置出现

<div class="D1">

</div>
<div class="D2">

</div>

<div class="D3">

</div>

<div class="D4">

</div>

.D1,.D2,.D3,.D4{ 
border:1px solid;
border-color:red;
width:500px;
height:200px;
}
/*  OR 
div{
border:1px solid;
border-color:red;
width:500px;
height:200px;
}
*/

---

很抱歉这个可能很愚蠢的问题，但我只是好奇：这是预期的行为

默认情况下，div是块元素，这意味着它们总是从新行开始，占据可用的全部宽度

如果希望元素位于同一行上，并且只占用所需的宽度，则必须使用内联元素，例如span

---

查找完整的引用默认情况下，显示属性为block for div。将其更改为inline以显示在一行中。

默认情况下，页面流将显示您的divs元素，如您所见，这些元素是一个块接一个块

如果要覆盖此行为，可以设置

position: absolute;

属性设置为div，以便可以将其放置在任意位置，而不考虑其他元素的位置。例如，您可能希望通过执行以下操作将所有div设置在左上角：

div {
position: absolute;
top: 0;
left: 0;
}

---

如果使用float:left；在css中，问题将得到解决。因为div元素是块级元素。

因为这是它们作为块级元素的自然行为…我以为它们会在同一个位置出现->为什么这样想？使用display:inline block了解您第一次看到的关于内联元素和块级元素之间差异的内容。这不是问题。。他想让他们在同一个位置互相攻击！我想我们不会期望这种行为，因为它解释了它们为什么会出现在彼此下方，所以它回答了为什么会出现这样的问题。好吧，这对我来说很简单，因为没有什么需要解释的，你的第一句话就够了。。。但是如果我们问为什么它们不是相邻的，这应该是块和内联之间的答案差异。。。但是他在想为什么他们不在一起，所以问题是为什么他期待这样的行为，这根本不符合逻辑