但是,每当我这样做时,我发现自己必须在CSS中分配特定的“顶部”值。所以div 1可能是最高的:50px,div 2将是top:150px,div 3将是top:225px;
有没有办法确保div在父节点内继续堆叠而不指定顶部值和/或绝对定位?
答案 0 :(得分:22)
div
应该已经显示为一个块并占据一个完整的“行”。这里有一些HTML和CSS给出一个例子,将它与你的代码进行比较:
<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>
如果这不起作用,您可能需要将它们放在显示中:inline-block;
答案 3 :(得分:1)
在css
文件中使用...
div
{
display : block;
}
这将为每个div
块提供一个中断线,默认情况下该功能不使用relative
- absolute
技术。
答案 4 :(得分:0)
删除绝对定位。使用margin:auto
将div居中,然后提供您喜欢的垂直边距。
答案 5 :(得分:0)
您可以为内部div提供保证金。