如何完全放置我的佈局的「功能」部分（請參閱鏈接）？

我已經使用DIV/CSS創建了一個佈局。我附上了一個示例圖片和下面的鏈接，顯示了我希望組織的事情。在標題中，有一個標誌和一個寬度爲1000px的菜單。該功能，內容和頁腳部分的寬度也應爲1000像素。但是，所有部分的實際背景圖像寬度均爲100％，並在水平方向重複。如何完全放置我的佈局的「功能」部分（請參閱鏈接）？

下面是我想要做的一個例子：

Example layout concept

什麼其實我已經放在一起，到目前爲止（在設計方面），在這裏可以查看：http://ohachem.com/2/。這是我想要遵循的。可以在這裏查看CSS：http://ohachem.com/2/style.css

完成此操作的最佳方法是什麼？正如您所看到的，「特徵」部分中的文本沒有完全在中心對齊。我試過使用clear：both，overflow：hidden和其他幾種方法，但都沒有運氣。

來源

2013-02-26 Omar

你看過bootstrap嗎？ http://twitter.github.com/bootstrap/ – 2013-02-26 17:32:38

你的問題太寬泛了，你能縮小到你遇到的具體問題嗎？ – dezman 2013-02-26 17:34:13

@watson：如果您注意到「功能」部分，它並不完全對齊在頁面的中心。我想有這個中心。一旦解決了這個問題，我正在研究如何使這個佈局響應，但我不確定從哪裏開始。 – Omar 2013-02-26 17:54:25

「精選」文本的「錯位」是由浮動標識引起的。由於浮點數未被清除並且延伸到標題外，因此會導致文本在其周圍流動。將overflow: hidden添加到#header元素將會更正它，但還有其他方法可以在不添加額外標記的情況下清除浮動元素。

或者，您可以讓標識與標題高度相同。現在height屬性設置爲相同的值，但徽標有一些額外的填充，導致溢出。

來源

2013-02-26 18:37:43 cimmanon

這是一個簡單的解決方案。非常感謝你！ – Omar 2013-02-26 19:29:03

您指向的網站使用液體佈局，以下是一些示例：http://www.dynamicdrive.com/style/layouts/category/C13/。

請注意，在您的示例中，沒有可以識別的定位屬性，使佈局響應的很大一部分是確保它在所有瀏覽器屏幕上看起來一致。

來源

2013-02-26 17:34:18 RandomUs1r

我會建議您使用CSS3媒體查詢而不是腳本響應/自適應網頁設計。

請看看this

這些不處理很多，因此重量輕，最現代的瀏覽器和設備支持CSS3因此一個方便，可靠的選擇。

來源

2013-02-26 17:39:04

我想這也應該可以解決你的問題 – 2013-02-26 17:41:04

如何完全放置我的佈局的「功能」部分（請參閱鏈接）？

回答

相關問題