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,新手上路難免有地方弄錯 ![]()
|
發表人: | 李某人 [ 2005-10-08, 01:24 ] |
文章主題 : | |
看這個, Fixed or fluid width? Elastic! 反過來就是了... |
發表人: | coolcd [ 2005-10-08, 17:04 ] |
文章主題 : | |
感謝! 已解決... 因為三個欄位都放在一個 Wrapper 裡 所以我在 Wrapper 加個最小寬度的設定就 ok 了 之前只有想分別改 header 跟每個欄位的 min-width 沒想到有更簡單的方法... ![]() 不過感覺上三個欄的 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 頁 (共 1 頁) | 所有顯示的時間為 UTC + 8 小時 |
Powered by phpBB® Forum Software © phpBB Group https://www.phpbb.com/ |