思路是这样的,使用绝对定位和相对定位,先把三列的位置、 " />
转到首页 > WEB标准 > CSS三列布局 固定左右 中间列宽度自适应
201009月17

CSS三列布局 固定左右 中间列宽度自适应

今天在一个网站上面看到一篇文章,说是百度的WEB面试题,饶有兴趣的看了下,只提到了两个问题,一是title与alt的区别,这个就很简单了;对第二个问题比较感兴趣,大致意思是这样的:使用三列布局,左边和右边宽度固定,左边左对齐,右边右对齐,中间宽度不固定,可以随着窗口改变而变。这个问题还是比较简单的,趁着中午休息,写了段代码,练练手。

今天的主题是:三列布局,中间一列宽度自适应(感觉好别扭呀,有没有通顺一点的语句^_^)

先贴张图看一下:


思路是这样的,使用绝对定位和相对定位,先把三列的位置、间距设置好,再对各自的背景色及对齐方式等进行赋值,之后使用zindex对中间一列进行宽度自适应的处理。

代码如下:

文章作者:admin
本文地址:http://www.cookseo.com/286.html
版权所有:网站SEO-网站优化 © 转载时必须以链接形式注明作者和原始出处!

14 Responses to “CSS三列布局 固定左右 中间列宽度自适应”

  1. #1 灰鼠 回复 | 引用 Post:2010-09-30 11:58

    你這個寫未免有點代碼太多了,我有一個更好的方式可以供參考一下:
    <div style="margin:auto; width:1000px;">
    <div style="float:left; width:100px; background:#000;">1</div>
    <div style="float:right; width:100px; background:#00F">3</div>
    <div style="background:#900;">2</div>
    </div>

    daniel 于 2010-10-9 19:05:38 回复

    但你这个已经把宽度定死了,说的是要自适应宽度,100%,不是1000px

  2. #2 ivan 回复 | 引用 Post:2010-09-30 07:55

    呵呵,经常用到这样的布局。

  3. | 借博主宝地!祝博主人气越来越旺|

  4. #4 真好 回复 | 引用 Post:2010-09-22 22:45

    zindex这个应该是个亮点,虽然我不太明白这些代码。

    daniel 于 2010-9-26 12:50:08 回复

    嗯,有些需要用到特效的地方可借助zindex来实现

  5. #5 减肥药排行榜 回复 | 引用 Post:2010-09-21 21:31

    三列CSS的排版很精典的哦,呵

  6. #6 疯子 回复 | 引用 Post:2010-09-21 10:30

    最近你忙着工作,人气越来越差了哦。 Adore

    daniel 于 2010-9-25 12:56:01 回复

    呵呵,没办法呀,你的人气是越来越旺了哦。

  7. #7 扣扣网 回复 | 引用 Post:2010-09-20 20:04

    呵呵 不错。代码我看不懂。我晓得博主代码很牛的 中秋快到了,我祝福你中秋快乐 ,家庭幸福美满!今天我博客更新了一个“QQ好友IP查看器”喜欢的朋友欢迎下载。

    daniel 于 2010-9-21 9:12:57 回复

    呵呵,多谢,这个是会显示IP的外挂吗?

  8. #8 捷易通官方 回复 | 引用 Post:2010-09-20 10:48

    对CSS我就只能一些最简单的了。

  9. #9 Firm 回复 | 引用 Post:2010-09-19 08:22

    这个是比较基础的

    daniel 于 2010-9-19 12:37:52 回复

    嗯,还好,稍微有点难度。

  10. #10 益酷网 回复 | 引用 Post:2010-09-18 21:16

    学习了一下!好久没来了!

    daniel 于 2010-9-19 12:39:41 回复

    呵呵,是呀,最近在忙什么呢?

  11. #11 宿迁学院论坛 回复 | 引用 Post:2010-09-17 21:59

    额 话说 我写不出来……

    daniel 于 2010-10-9 19:06:15 回复

    嘿嘿,我可以帮你写么。

  12. 非常不错的代码!
    谢谢分享了!!

    daniel 于 2010-10-9 19:06:00 回复

    觉得好用就拿走 Haha

  13. #13 web前端寒风 回复 | 引用 Post:2010-09-17 15:54

    呵呵,同意楼下的观点Haha

    daniel 于 2010-9-19 12:39:17 回复

    不要附合哦,我可没这个意思。Nothing_to_say

  14. #14 Tony 回复 | 引用 Post:2010-09-17 15:40

    你是不是故意发出来给百度看的啊,好让百度发现:哟,这还是个人才啊~~~~Grimace

    daniel 于 2010-9-19 12:38:13 回复

    知我者,你也!Shame

发表评论