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

Question

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

1. "父母"有位置:亲戚
2. "div 1-3"有位置:绝对

但是,每当我这样做时,我发现自己必须在CSS中分配特定的"顶部"值.因此div 1可能是最高的:50px,div 2将是top:150px,div 3将是top:225px;

有没有办法确保div继续在父级内堆叠而不分配顶部值和/或绝对定位？

Answer 1

A div应该已经显示为一个块并占据一个完整的"行".这里有一些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技术。