如何将CSS元素直接垂直排列？

Question

如何将CSS元素直接垂直排列？

8

我知道可能已经有类似的问题得到解决，但是我搜索了一下，没有找到解决方案。

所以，看看吧。我有一个网站的基础部分。页头，特色内容，主要内容和页脚。我希望主要内容位于特色内容下面，但现在它在后面。我该如何让它直接排在下面？

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（层叠样式表）：

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;
}

- Intact Dev

3

请发布你已经完成的内容。 - Dror

你可以在这里提供你的代码吗？答案可能是清除两个，修复浮点等等。不过需要看到你的代码才能更具体（HTML 和 CSS）。 - Thanos

抱歉，没有代码。帖子已更新。 - Intact Dev

发布你的HTML的其余部分...？ - Trojan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Elijah Murray · Accepted Answer

创建一个容器div，它包含了你想要的所有内容，无论你是想垂直或水平堆叠它们。大致上看起来像这样：

<div id="container">
    <div class="header">
    </div>

    <div class="navigation">
    </div>

    <div class="left-sidebar">
    </div>

    <div class="content">
    </div>
</div>

你的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;
}