作者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)