Css 如何在父级中自动垂直堆叠div？

以下是我正在努力实现的目标。。。

“父项”的位置为：相对

“1-3区”位置：绝对位置

然而，每当我这样做时，我发现自己必须在CSS中指定特定的“top”值。所以div1可能是top:50px，div2可能是top:150px，div3可能是top:225px

---

有没有办法确保Div继续堆叠在父级中，而不指定顶值和/或绝对位置？

Div元素是块元素，这意味着它们将占据整行，旁边的任何元素都将跳过一行。 只要做：

---

如果这不起作用，您可能需要将它们放在display:inline块中

只需删除绝对定位。使用

margin:auto

将div居中，然后提供您喜欢的任何垂直边距。

A

div

应该已经显示为一个块并占据一整行。下面是一些HTML和CSS示例，将其与您的代码进行比较：

福
酒吧
巴兹

您可以给内部div留边距。

应该是直的：

HTML:

---

检查此项。

在

css

文件使用中

div
{
    display : block;
}

---

这将为每个

div

块提供一条换行符，默认情况下该功能不使用

relative

-

absolute

技术。

您能发布代码吗？默认情况下，他们应该有这种行为。请尝试用示例或演示来解释您的答案。但问题是：如果我有一个内联菜单，三个框使用（父-子）（相对-绝对）技术以内联方式排列。这将以垂直方式而不是水平方式（即在列中而不是在行中）将每个

div

紧跟在其前一个之后。它不会在它们之间放置任何空间，问题的说明表明这是期望的行为。此外，您应该解释为什么您认为他们不应该使用

相对
/
绝对
技术。
<div id="parent">

    <div class="child">Foo</div>
    <div class="child">Bar</div>
    <div class="child">Baz</div>

</div>

<div class="container">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
</div>

.container {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #ffbf00;
}
.red {
    background-color: #f00;
    width: 200px;
    height: 150px;
    margin: 5px auto;
}
.blue { 
    background-color: #0f0;
    width: 200px;
    height: 150px;
    margin: 5px auto;
}
.green {
    background-color: #00f;
    width: 200px;
    height: 150px;
    margin: 5px auto;
}

div
{
    display : block;
}