div對齊和浮動問題

我正在重新創建AACC網站（頁面here），並遇到了一些問題，試圖對齊中間的專欄，名爲「國家倡議」，「領先地位」和「獎項程序」。在我的源代碼中，可以用css here查看源代碼，我創建了它，以便帶有克林頓圖片的橫幅浮動到登錄區域和側欄的左側。然而，如果我使用clear：無論如何，第一列（可在頁面底部查看）保留在右側邊欄下方。我不完全確定如何解決這個問題，也許我只是將明確的屬性放在代碼中的錯誤位置或任何可能出現的問題。只需使用一套新的眼睛就可以了。div對齊和浮動問題

這裏的CSS代碼，我覺得這個問題能夠得到糾正：

#banner {float: left; width: 730px;} 

#logbar { 
background-color: rgb(95, 193, 47); color:#FFFFFF; padding: 3px; margin-left: 740px; width: 240px; height: 130px;} 

#sidebar{margin-left: 740px; width: 240px; height: 700px; padding:1px; background-color: #66CC66; margin-top: 3px;} 

#col1{float:left; width:236; height;300px; background-color:rgb(204, 227, 251);}

來源

2013-11-09 TeamRival

一切似乎都很好，我可以告訴我們一個截圖嗎？您面臨的問題是什麼瀏覽器 - 也讓我們知道您的瀏覽器版本和操作系統。 –

下面是問題：http://s12.postimg.org/k024g05zx/mywork.jpg以下是它的外觀：http://s17.postimg.org/s8pdkilgv/original_site.jpg 我使用FF但也在IE中嘗試過。不要認爲瀏覽器兼容性是一個問題。另外我使用的是Vista 64位 – TeamRival

如果你能在JSFiddle或CodePen上用代碼演示你的問題會更好:) – Terry

我可以看到，是有可能與你的HTML結構是絕對定位元素的唯一途徑。

#col1 { 
    top: 420px;   /* Add this */ 
    position: absolute; /* And this */ 
    width: 236px; 
    background-color: rgb(204, 227, 251); 
}

然而，這只是一個破解。你應該重構你的HTML。 AACC不是一個好例子 - 他們使用表格來進行佈局。看看stackoverflow如何爲更好的例子創建他們的邊欄。

來源

2013-11-10 00:40:12

感謝您的協助。是的，這是迄今爲止最困難的HW，尤其是因爲通過設置表格併合並列和行，可以在Dreamweaver中輕鬆地複製它。我知道絕對定位是一個很大的最後手段，但我認爲在這種情況下，這將是最佳的行動方針。不想再重新編碼一切，會非常耗時。再次感謝！ – TeamRival

div對齊和浮動問題

回答

相關問題