Home > 前端开发 > CSS三列布局 固定左右 中间列宽度自适应

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

/ 前端开发 / / 213 Views
14

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

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

先贴张图看一下：


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

代码如下：

发表评论

*

已有 14 条评论

  1. 灰鼠 说：

    你這個寫未免有點代碼太多了，我有一個更好的方式可以供參考一下：
    <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. ivan 说：

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

    回复
  3. 中华E商创业商务网 说：

    | 借博主宝地！祝博主人气越来越旺|

    回复
  4. 真好 说：

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

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

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

    回复
  5. 减肥药排行榜 说：

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

    回复
  6. 疯子 说：

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

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

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

    回复
  7. 扣扣网 说：

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

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

    呵呵，多谢，这个是会显示IP的外挂吗？

    回复
  8. 捷易通官方 说：

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

    回复
  9. Firm 说：

    这个是比较基础的

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

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

    回复
  10. 益酷网 说：

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

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

    呵呵，是呀，最近在忙什么呢？

    回复
  11. 宿迁学院论坛 说：

    额 话说 我写不出来……

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

    嘿嘿，我可以帮你写么。

    回复
  12. 蜂胶的作用与功效 说：

    非常不错的代码！
    谢谢分享了！！

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

    觉得好用就拿走 Haha

    回复
  13. web前端寒风 说：

    呵呵，同意楼下的观点Haha

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

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

    回复
  14. Tony 说：

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

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

    知我者，你也！Shame

    回复