我知道这可能是一个已经解决的问题,但我已经搜索过了,我无法解决问题.
所以,看.我有一个网站的基础知识.标题,精选内容,主要内容和页脚.我希望主要内容属于特色内容,但现在它已落后于它.我怎样才能让它在它下面？
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;
}
创建一个容器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;
}