Question

我不是在问这个，因为这对我来说是一个问题，实际上，这正是我想要显示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;
}
*/

抱歉这可能是一个愚蠢的问题，但我只是好奇：D

Answer 1

这是预期的行为。

默认情况下，

div为block元素，这意味着它们始终以新行开头并占用可用的全部宽度。

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

查找here完整参考资料

Answer 2

默认情况下，页面流将显示您的div元素（即块），如您所见。

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

position: absolute;

属性到您的div，因此无论其他元素的位置如何，它们都可以放置在您想要的任何位置。例如，你可能想要在左上角设置所有div：

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

Answer 3

默认显示属性是div的块。将其更改为内联以显示在一行中。

Answer 4

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

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

4 个答案: