Html 你如何将 CSS 元素直接放在彼此的下方？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17871650/
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 you position CSS elements directly under each other?
提问by Intact Dev
I know there is probably a solved question like this, but I've searched and I couldn't a solution.
我知道可能有这样一个已解决的问题，但我已经搜索过，但找不到解决方案。
So, look. I have the basics for a website. A header, featured content, main content, and footer. I want the main content to fall under the featured content, but right now it's behind it. How can I make it go right underneath it?
所以，看。我有网站的基础知识。页眉、特色内容、主要内容和页脚。我希望主要内容属于特色内容，但现在它在后面。我怎样才能让它直接在它下面？
HTML:
HTML：
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="navigation"></div>
<div class="content-featured"></div>
</body>
CSS:
CSS：
html, body {
margin: 0;
padding: 0;
}
.navigation {
float: left;
padding: 15px 0;
min-width: 100%;
opacity: .48; /* layer alpha */
background-color: #1f1f1f; /* layer fill content */
height: 20px;
}
.content-featured {
height: 384px;
background-image: -moz-linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */
background-image: -o-linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */
background-image: -webkit-linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */
background-image: linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */
}
.content-main {
height: 308px;
}
采纳答案by Elijah Murray
Create a container div. This holds everything you want, whether you want to stack them vertically or horizontally. So roughly it would look like this:
创建一个容器 div。无论您是想垂直还是水平堆叠它们，这都能容纳您想要的一切。所以大致看起来像这样：
<div id="container">
<div class="header">
</div>
<div class="navigation">
</div>
<div class="left-sidebar">
</div>
<div class="content">
</div>
</div>
And your CSS would be
你的 CSS 将是
#container {
width:960px;
}
.header, .navigation {
width: 100%;
float:left;
height: 80px;
}
.sidebar {
width: 200px;
float:left;
min-height: 500px;
}
.content {
width: 760px;
float: left;
min-height: 500px;
}
