MozTW 討論區
https://forum.moztw.org/

CSS 欄位配置的問題
https://forum.moztw.org/viewtopic.php?f=13&t=10869
1 頁 (共 1 頁)

發表人:  coolcd [ 2005-10-07, 06:19 ]
文章主題 :  CSS 欄位配置的問題

我想弄一個一般網頁常見的三欄式配置。

左邊是 Menu,中間是主要內容,右邊是一些控制面板(其實就是 TiddlyWiki 啦!)~

我的問題是,原始的 CSS 用 em 作為單位,但是當我改變視窗大小時,發覺左右欄位不會因視窗而改變大小,會蓋到中間欄位的內容。

我不是很喜歡這樣的配置,想改成欄位可隨視窗大小改變欄位寬度。

於是我把 em 改成 %,現在欄位隨視窗改變大小是沒問題了,但當視窗變得太小時,欄位的可讀性會變得很低。如果用 min-width 限制欄位最小寬度為某一個絕對單位,三個欄位又會有重疊。(請看附件 HTML 檔)

請問是否有方法可以讓版面配置在 640*512 以上時,欄位會隨視窗改變大小,若小於 640*512,就維持版面,不再縮小?

我的 Stylesheet 是以 MilchFlasche 推薦的樣式為藍本修改的

如果需要看 CSS Code 的話在附件網頁右下角 Timeline 裡找到 StyleSheet ,就是目前樣式的 Code。

(順便 call for review,有那些不好的地方請提出來,這是我改的第一個 CSS,新手上路難免有地方弄錯 :wink: )

附加檔案:
檔案註釋: TiddlyWiki CSS Modification
coolcd.zip [32.69 KiB]
被下載 282 次

發表人:  李某人 [ 2005-10-08, 01:24 ]
文章主題 : 

看這個, Fixed or fluid width? Elastic!

反過來就是了...

發表人:  coolcd [ 2005-10-08, 17:04 ]
文章主題 : 

感謝! 已解決...

因為三個欄位都放在一個 Wrapper 裡
所以我在 Wrapper 加個最小寬度的設定就 ok 了
之前只有想分別改 header 跟每個欄位的 min-width
沒想到有更簡單的方法... :D

不過感覺上三個欄的 CSS
好像中間不知怎麼定位好?(左、右欄不同寬,所以不能用 auto)
左欄、右欄可以用 float left , float right
中間用 position relative/positive?

{
position: relative
width: N%;
left:?
}

我附件裡的網頁是土法煉鋼
慢慢試 試很很久才調出來的......
Orz

發表人:  李某人 [ 2005-10-08, 20:47 ]
文章主題 : 

一般的做法是...

1. 三個 columns 都 float
2. 兩個 columns 用 absolute positioning, 剩下最長的那個加 margins (像現在 W3C 那樣

發表人:  coolcd [ 2005-10-09, 08:00 ]
文章主題 : 

李某人 寫:
一般的做法是...

1. 三個 columns 都 float
2. 兩個 columns 用 absolute positioning, 剩下最長的那個加 margins (像現在 W3C 那樣


謝謝你哦!
有經驗的人來帶
果然可以減少不少彎路~

1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/