作者elan (嵐)
看板Web_Design
標題Re: [問題] 關於css的區塊問題
時間Tue Jun 20 03:40:33 2006
※ 引述《averywu (Dino)》之銘言：
: ※ 引述《eliang ()》之銘言：
: : 如果是我來做, 我會畫一張長條藍灰背景圖,
: : 作為 main 的背景, 而非直接設定 left 或 right 的背景色,
: : 背景圖大概長這樣:
: : ██████████████████████████
: : 其中藍色要剛好配合 left, 灰色部分則配合 right,
: : 然後設定 CSS (大概寫一下而已,細節請自己試):
: : #main {
: : background: url(bg.jpg) repeat-y;
: : width: 800px;
: : }
: : #left {
: : float: left;
: : width: 200px;
: : }
: : #right {
: : margin-left: 200px;
: : }
: 感謝您的指點，這個方法在一開始時有想過，但是main部份本身有其它背景圖
: 而作罷。去看了許多站台遇到這種情形好像都只能用table來解決。
: 但是我老闆不接受用table排版，看來要試著去說服他了:(
那就多用一個wrapper div包住left和right就行了 再把這個背景圖片assign給這個div
用這個方法的話 因為你的left是個floated element 你需要一些workarouns/hacks
讓wrapper能包住left和right 否則當left比right還要高時 wrapper只會延展到包住right
而已
我用你的例子大概寫了一下:
http://elanhung.50webs.com/example01.html
當然你也可以只靠css而不用圖片做到這個"等高"的效果
方法有很多 我也用你的例子寫了一個
http://elanhung.50webs.com/example02.html
基本上這也是用一個wrapper包住left和right 然後給這個wrapper一個藍色200px的
left border 以及一個白色600px的right border(兩個加起來剛好是main的800px)
這些css layout的方法在我的firefox上看起來都沒問題 當然做到cross-browser就需要
額外的workarounds/hacks 我都省略了 就讓你去想想吧
相關的技巧在網路上大家已經討論很多了 你就去google一下吧!
希望會有幫助
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.131.2.233
※ 編輯: elan 來自: 220.131.16.117 (06/20 10:08)