在 CSS 中排列和定位两个 div [英] Arranging and positioning two divs below each other in CSS

问题描述

我是 CSS 新手，所以这个问题可能非常简单.我正在布置一个网站，但一直在定位.

I'm new to CSS, so this question might be dead simple. I am laying out a website and am stuck with positioning.

在网站上，我有一个中间部分，其中有一个标题，下面有一些可滚动的内容.这是标题 div 的相关 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:

#header {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
}

现在，我只是想让内容 div 立即跟随在下面，但不知道如何做到这一点.

Now, I simply want the content div to immediately follow underneath, and can't figure out how to do that.

position: relative; 
top: 0; 

似乎不起作用(我最初预计会起作用).两个 div 都在同一逻辑级别上，并包裹在中间部分 div 中.我可能遗漏了一些非常明显和容易的东西.

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.

推荐答案

如果你有类似的事情

<header>header</header>
<main>main content</main>

使用这个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.

http://jsfiddle.net/86wX4/

这篇关于在 CSS 中排列和定位两个 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！