我知道这可能是一个已经解决的问题,但我已经搜索过了,我无法解决问题.
所以,看.我有一个网站的基础知识.标题,精选内容,主要内容和页脚.我希望主要内容属于特色内容,但现在却落后于它.我怎样才能让它在它下面？
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,#257755 125%); /* gradient overlay */
- background-image: -webkit-linear-gradient(bottom left,#257755 125%); /* gradient overlay */
- background-image: linear-gradient(bottom left,#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;
- }
