css - 如何在父对象中自动垂直堆叠 div？

Question

这就是我想要完成的...

1. “父”的位置：相对
2. “div 1-3”有位置：绝对

然而，每当我这样做时，我发现自己必须在我的 CSS 中分配特定的“顶级”值。所以 div 1 可能是 top:50px，div 2 会是 top:150px，div 3 会是 top:225px；

有没有办法确保 div 在不分配最高值和/或绝对定位的情况下继续堆叠在父级内部？

Answer 1

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

http://jsfiddle.net/mWcWV/

<div id="parent">

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

</div>

Answer 2

应该是直的：

HTML：

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

CSS：

.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;
}

检查这个小提琴。

Answer 3

在css文件使用...

div
{
    display : block;
}

这将为每个块提供一个断线div，该功能默认情况下不使用relative-absolute技术。

Answer 4

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

<div></div>
<div></div>
<div></div>

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

Answer 5

只需删除绝对定位。使用 div 居中margin:auto，然后提供您喜欢的任何垂直边距。

Answer 6

您可以为内部 div 提供边距。