重疊CSS列

我有一個重疊列的小問題。基本上我有3列，中間列的內容與右列重疊。我是一個css amatuer，因此當中間列的內容比平常大時，我無法擴展右列。如果我試圖讓中間列變寬，那麼右側列將會下降，並且一切都不會對齊。重疊CSS列

這是CSS代碼：

#content { 
width:960px; 
margin:0 auto 20px; 
overflow:visible 
} 

.c_middle { 
width:960px; 
background: transparent url(../images/content_middle.gif) repeat-y top center; 
} 
.c_left { background: transparent url(../images/content_left.gif) repeat-y top center;} 
.c_right {background: transparent url(../images/content_right.gif) repeat-y top center;} 
.c_full {background: none;} 

#leftcolumn, #rightcolumn { 
float: left; 
width: 210px; 
margin: 0 10px 0 0; 
} 

#rightcolumn { 
margin: 0 0 0 10px; 
} 

div#maincolumn { 
float: left; 
width: 500px; 
padding:0 10px; 
} 

div#maincolumn_full { 
float: left; 
width: 960px; 
padding:0 0 10px; 
} 

div#maincolumn_left { 
float: left; 
width: 720px; 
padding:0 10px 10px; 
} 

div#maincolumn_right { 
float: left; 
width: 720px; 
padding:0 10px 10px; 
}

在此先感謝。

來源

2009-12-31 Ruben

歡迎來到StackOverflow，Ruben！ – Sampson

看來你正在構建一個960像素的項目 - 爲什麼不使用960 Grid System而不是重新發明輪子？這將是一種快速而無痛的方式，可以消除目前與這些列有關的任何問題。

<link rel="stylesheet" href="css/reset.css" /> 
<link rel="stylesheet" href="css/text.css" /> 
<link rel="stylesheet" href="css/960.css" /> 

<div class="container_12"> 
    <div class="grid_3 alpha"> 
    <p>Left Column</p> 
    </div> 
    <div class="grid_6"> 
    <p>Center Column</p> 
    </div> 
    <div class="grid_3 omega"> 
    <p>Right Column</p> 
    </div> 
    <div class="clear"></div> 
</div>

來源

2009-12-31 06:40:33 Sampson

我第一次聽到960系統。偉大的網站，這是學習新的東西（同時幫助其他人）。謝謝。 – Edelcom

很難說出沒有標記的分類，但似乎在某些情況下，您的寬度+邊距+填充水平會超過960像素。但是，再次，不知道你如何嵌套標記，很難說。

我同意喬納森桑普森 - 在重塑960網格系統方面沒有意義。如果你得到這個工作，如果這是你的關注，你將不可避免地在一些瀏覽器中遇到奇怪的問題。爲什麼不利用其他人已經完成所有工作的努力。

來源

2009-12-31 07:16:55

回答

相關問題