Question

我对CSS很新，并且已经坐了好几个小时试图找出为什么我的中间部分没有显示为列。我搜索网似乎没有成功。我已经尝试重新定位div，清除所有内容并将bejesus从所有内容中移除。它必须是简单的东西，但我不知道是什么。有人可以帮忙吗？

我为大量的代码道歉，如果这不合适，但我还没有上传任何内容。

提前致谢

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

Answer 1

我看到的问题是你试图将一系列div一个堆叠在另一个上面而没有任何容器来创建三列页面设计，而这可能是用css完成的，它可以更简单地创建每列的一系列容器，可用于堆叠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中心列 - 清除错误？

1 个答案: