Html 在 CSS 中排列和定位两个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15498048/
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
Arranging and positioning two divs below each other in CSS
提问by principal
I'm new to CSS, so this question might be dead simple. I am laying out a website and am stuck with positioning.
我是 CSS 新手，所以这个问题可能非常简单。我正在布置一个网站，并坚持定位。
On the site, I have a middle section in which there is a header with some scrollable content underneath. Here's the relevant CSS for the header div:
在网站上，我有一个中间部分，其中有一个标题，下面有一些可滚动的内容。这是标题 div 的相关 CSS：
#header {
position: absolute;
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
}
Now, I simply want the content div to immediately follow underneath, and can't figure out how to do that.
现在，我只是想让内容 div 立即跟随在下面，但不知道如何做到这一点。
position: relative;
top: 0;
doesn't seem to work (which I initially expected to). Both divs are on the same logical level and wrapped inside the middle section div. I am probably missing something extremely obvious and easy.
似乎不起作用（我最初预计会起作用）。两个 div 都在同一逻辑级别上，并包裹在中间部分 div 中。我可能遗漏了一些非常明显和容易的东西。
回答by Linus Caldwell
If you have something like
如果你有类似的东西
<header>header</header>
<main>main content</main>
Use this css:
使用这个css：
header, main
{
display: block; /* because <main/> is very new */
padding: 20px;
background: #eeeeee;
}
header
{
background: blue;
}
That's all, because block elements go below each other per default.
这就是全部，因为块元素默认情况下彼此低于。
回答by George
Is there any reason that your #headeris absolutely positioned? Remove that style and I think you'll find the <div>s will stack how you're expecting.
你#header的绝对定位有什么理由吗？删除该样式，我想您会发现<div>s 将按照您的预期堆叠。
Giving the <div>an absolute positioning takes it out the flow of the page, so elements that are still in the flow, 'don't think'it's there, hence, they don't stack on top of each other.
给予<div>绝对定位会将其从页面的流程中取出，因此仍在流程中的元素“不要认为”它在那里，因此，它们不会相互堆叠。
Say this is your markup:
说这是你的标记：
<div id="header">Header</div>
<div id="content">Content</div>
If you are going to absolutely position these elements you'll want to arrange them using left, top, rightand/or bottomstyles. I.E:
如果你要这些元素绝对定位你要使用安排他们left，top，right和/或bottom样式。IE：
#header{
position: absolute;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 50px;
}
#content{
position:absolute;
width:100%;
top:50px; //Because the header is 50px high
}
BUT
但
Positioning all of these relatively (or leaving them at the default, static) would stack them how you want them anyway - and they would even stretch the width of the page for you.
相对地定位所有这些（或将它们保留为默认的、静态的）无论如何都会按照你想要的方式堆叠它们 - 它们甚至会为你拉伸页面的宽度。
Hope this helps.
希望这可以帮助。
回答by Ashwani Sharma
is there any reason to use your header div with absolute position? you can use relative position for both div's to arrange below each other.
有什么理由使用绝对位置的标题 div 吗？您可以使用两个 div 的相对位置来排列彼此。
