問題與響應網頁設計

-1

我是關於編碼新網站，但我有一些麻煩履行所有設計和搜索引擎優化要求。全屏網站的最大寬度爲950px，頂部和底部爲全寬頁面，中心區域爲左部分寬度爲200px，內容區域爲動態寬度 - 當網站顯示爲小屏幕頂部和底部將保持頂部和底部，但左側將移動到內容下方。對搜索引擎優化的要求是，代碼中的內容應放置在左側部分之上，並且沒有JavaScript用於解決設計問題。問題與響應網頁設計

我的大問題是放置左側部分，因爲如果我使用絕對位置，底部不會是頁面的底部 - 並且使用浮動會給我帶來麻煩，當屏幕小於950像素而超過320像素時，剩下。

任何人都可以給我一個例子滿足這些要求嗎？

編輯：

一個簡單的例子與絕對位置;

<!doctype html> 
<html> 
<head> 
    <title>TEST</title> 
</head> 
<body> 
    <div style="max-width: 750px; background-color: Red;">TOP</div> 
    <div style="max-width: 750px; position: relative;"> 
    <div style="margin-left: 200px; background-color: Green;">CONTENT</div> 
    <div style="width: 200px; position: absolute; top: 0; background-color: Silver;">LEFT<br>LEFT<br>LEFT<br>LEFT</div> 
    </div> 
    <div style="max-width: 750px; background-color: Blue;">BOTTOM</div> 
</body> 
</html>

來源

2012-06-24 keysersoze

請提供代碼或網站鏈接 –

我不認爲這是可能的純CSS。顛倒這樣的源碼順序通常需要浮動，並且他們不會按照您希望的那種靈活的佈局工作。 –

已關閉 - 如果沒有使用JavaScript，似乎不可能。

來源

2013-01-09 19:18:42 keysersoze

只是使用'float：right;' - http://jsfiddle.net/ZeFf4/

來源

2012-06-24 21:47:24

你的代碼的工作原理是因爲你爲所有元素設置了px-widths - 嘗試對元素和動態寬度使用max-width到content div。 – keysersoze

這是相同的：http://jsfiddle.net/ZeFf4/1/ –

我很滿意我可以得到的幫助，但正如我看到它的例子仍不符合要求 - 左總是必須是200px加上固定頁面和CONTENT的左側必須具有動態寬度。您的代碼「有效」，因爲左側和內容都有動態寬度和最小/最大寬度。 – keysersoze

問題與響應網頁設計

回答

相關問題