CSS中心列 - 清除错误？

我对CSS非常陌生，在这里坐了几个小时，试图弄清楚为什么我的中间部分不显示为列。我在网上搜索显然没有成功。我尝试重新定位divs，清除所有内容并将bejesus从一切中解放出来。这一定很简单，但我不知道是什么。谁能帮忙？CSS中心列 - 清除错误？

对于大量的代码我很抱歉，如果这不合适，但我还没有上传任何东西。提前

感谢

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

来源

2012-03-24 tomdot

我无法弥补你所要设计的设计，你能发布一个模型或更好地解释你期望的是什么吗？ – 2012-03-24 11:11:09

对不起 - 我编辑我的帖子以显示图像的链接，因为我的代表意味着我无法发布它。 – tomdot 2012-03-24 11:28:57

请对你的结果做一个模型你究竟需要什么，因为我们会看到它你在看什么以及你是如何制作你的模型的代码的，这样我们就可以更容易地找到你的代码中的错误并尝试得到解决方案.... – 2012-03-24 11:31:03

我看到的问题是，你试图在另一个的上面堆放了一系列的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/。

请注意这些部分是如何堆叠在一个柱子内部的，这样您可以根据需要堆叠尽可能多的部分，并将它们恰当地堆叠在其容器内。

来源

2012-03-24 12:42:40

就是这样 - 太棒了！我应该首先想到创建单独的容器。我不明白一些CSS，但是，我可以阅读它。感谢你对我的坚持！ – tomdot 2012-03-24 14:47:20

@tomdot顺便说一下，我在列上使用了这种clearfix技术，因此您可以阅读它使用的“为什么”。 – 2012-03-24 14:51:02

CSS中心列 - 清除错误？

回答

相关问题