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

时间:2013-10-10 00:12:02

标签: css html position parent

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

  1. “parent”的位置:relative
  2. “div 1-3”有位置:绝对
  3. 但是,每当我这样做时,我发现自己必须在CSS中分配特定的“顶部”值。所以div 1可能是最高的:50px,div 2将是top:150px,div 3将是top:225px;

    有没有办法确保div在父节点内继续堆叠而不指定顶部值和/或绝对定位?

6 个答案:

答案 0 :(得分:22)

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>

答案 1 :(得分:3)

应该是直的:

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

选中fiddle

答案 2 :(得分:2)

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

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

如果这不起作用,您可能需要将它们放在显示中:inline-block;

答案 3 :(得分:1)

css文件中使用...

div
{
    display : block;
}

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

答案 4 :(得分:0)

删除绝对定位。使用margin:auto将div居中,然后提供您喜欢的垂直边距。

答案 5 :(得分:0)

您可以为内部div提供保证金。