Html 如何在父级内自动垂直堆叠 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19284923/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I automatically stack divs vertically inside a parent?
提问by Fingeldor
Here's what I am trying to accomplish...
这就是我想要完成的......
- "parent" has position:relative
- "div 1-3" have position:absolute
- “父母”有位置：相对
- “div 1-3”有位置：绝对
However, whenever I do this, I find myself having to assign specific "top" values in my CSS. So div 1 might be top:50px, div 2 would be top:150px, and div 3 would be top:225px;
然而，每当我这样做时，我发现自己必须在我的 CSS 中分配特定的“顶部”值。所以 div 1 可能是 top:50px，div 2 可能是 top:150px，div 3 可能是 top:225px；
Is there a way to make sure the divs continue to stack inside the parent without assigning top values and/or absolute positioning?
有没有办法确保 div 在不分配最高值和/或绝对定位的情况下继续在父级内堆叠？
回答by Joseph
A divshould already display as a block and take up a full "row". Here is some HTML and CSS to give an example, compare it to your code:
Adiv应该已经显示为一个块并占据一个完整的“行”。下面是一些 HTML 和 CSS 来举例，将其与您的代码进行比较：
<div id="parent">
<div class="child">Foo</div>
<div class="child">Bar</div>
<div class="child">Baz</div>
</div>
回答by TheVillageIdiot
Should be straight:
应该是直的：
HTML:
HTML：
<div class="container">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
CSS:
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;
}
Check this fiddle.
检查这个小提琴。
回答by Osahady
In cssfile use...
在css文件使用...
div
{
display : block;
}
Which will give a break line for each divblock and that feature is by default and don't use relative- absolutetechnique.
这将为每个div块提供一个中断线，并且该功能默认为不使用relative-absolute技术。
回答by Osahady
Div elements are block elements, which means that they will take a full row and that any element next to them will skip a line. Just do:
Div 元素是块元素，这意味着它们将占据一整行，并且它们旁边的任何元素都将跳过一行。做就是了：
<div></div>
<div></div>
<div></div>
If that does not work, you probably need to put them in display: inline-block;
如果这不起作用，您可能需要将它们放入 display: inline-block;
回答by Mike Brant
Just remove absolute positioning. Center the divs using margin:autoand then provide whatever vertical margins you like.
只需删除绝对定位。使用居中 div margin:auto，然后提供您喜欢的任何垂直边距。
回答by Gunjan Kothari
You can give margin to inner div.
您可以为内部 div 留出余量。
