css - CSS中心专栏-清除错误？

我是CSS的新手，已经坐在这里几个小时，试图弄清楚为什么我的中间部分没有显示为列。我搜索网络显然没有成功。我尝试过重新放置div的位置，清除所有内容并将耶稣从所有内容中移出。它一定很简单，但是我不知道是什么。有人可以帮忙吗？

对于不合适的代码，我深表歉意，但是我还没有上传任何东西。

提前致谢

的HTML

<head><style type="text/css" media="all">@import "css/master.css";</style></head>

<body>
<div id="page-container">
    <!-- RIGHT HAND PAGE -->
    <div id="navbar">NavBar</div>
    <div id="mediaplayer">Meda Player</div>
    <div id="sightings">Sightings</div>
    <div id="blogheader">Blog Header</div>
    <div id="sociallinks">Social Links</div>
    <!-- LEFT HAND PAGE -->
    <div id="logo">Logo</div>
    <div id="mainpic">MainPic</div>
    <!-- CENTRE PAGE -->
    <div id="headline">Headline</div>
    <div id="newsitems">News Items</div>
    <!-- FOOTER -->
    <div id="footer">Footer</div>
</div>
</body>
</html>

的CSS

#page-container {
width:960px;
margin:auto;
background:red;
}

html, body {
margin:0;
padding:0;
}

#logo {
background:purple;
height:150px;
width:270px;
margin-right:450px;
}

#mainpic {
background:darkgrey;
width:270px;
height:450px;
}

#navbar {
float:right;
background:lightblue;
height:50px;
width:690px;
}

#headline {
background:grey;
height:200px;
margin-left:270px;
margin-right:350px;
}

/* News Items Mock - height:350px */
#newsitems {
background:blue;
margin-left:270px;
margin-right:350px;
}

#mediaplayer {
clear:both;
float:right;
background:black;
height:200px;
width:350px;
}

/* Sightings Mock - height:150px; */
#sightings {
clear:both;
float:right;
background:green;
width:350px;
}

#blogheader {
clear:both;
float:right;
background:darkgreen;
height:40px;
width:350px;
}

#sociallinks {
clear:both;
float:right;
background:orange;
height:40px;
width:350px;
}

#footer {
background:yellow;
clear:both;
height:30px;
}

最佳答案

我看到的问题是，您正在尝试在没有任何容器的情况下将一系列div堆叠在另一个顶部，以创建三栏式页面设计，而使用CSS可能会更容易创建一系列div。每个列的容器，可用于在其下堆叠div。以这个为例：

如果创建了一系列列div，则可以轻松地将所有页面节堆叠在其自己的列内，这样，您可以轻松地在页面中随意堆叠任意节，而无需返回到CSS并以这种方式放置你现在正在做。

<div class="column">
   <section>
   <section>
</div>

<div class="column">
   <section>
   <section>
</div>

<div class="column">
   <section>
   <section>
</div>

在标记中声明了列之后，就可以浮动它们，使它们彼此相邻堆叠，然后可以使用clearfix，这样它们就不会彼此重叠，如下所示：

.column:before, .column:after {
    content:"";
    display:table;
}

.column:after {
    clear:both;
}

.column {
    zoom:1; /* ie hasLayout fix */
    float:left;
}

这是代码演示，其中的列实现了我想寻找的结果：http://jsfiddle.net/wSejZ/1/show/，您可以在此处编辑小提琴：http://jsfiddle.net/wSejZ/1/。

请注意，节是如何堆叠在列中的，这样您就可以堆叠任意数量的节，并且它们将被适当地堆叠在其容器内。

关于css - CSS中心专栏-清除错误？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9851179/