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中心列 - 清除錯誤？

回答

相關問題