CSS三列布局 固定左右 中间列宽度自适应
今天在一个网站上面看到一篇文章,说是百度的WEB面试题,饶有兴趣的看了下,只提到了两个问题,一是title与alt的区别,这个就很简单了;对第二个问题比较感兴趣,大致意思是这样的:使用三列布局,左边和右边宽度固定,左边左对齐,右边右对齐,中间宽度不固定,可以随着窗口改变而变。这个问题还是比较简单的,趁着中午休息,写了段代码,练练手。
今天的主题是:三列布局,中间一列宽度自适应(感觉好别扭呀,有没有通顺一点的语句^_^)
先贴张图看一下:
思路是这样的,使用绝对定位和相对定位,先把三列的位置、间距设置好,再对各自的背景色及对齐方式等进行赋值,之后使用zindex对中间一列进行宽度自适应的处理。
代码如下:
<div id=”l”>
This is left side
</div>
<div id=”m”>
<div class=”content”>
This is for middle
This is for middle
This is for middle
This is for middle
This is for middle
This is for middle
This is for middle
This is for middle
This is for middle
This is for middle
This is for middle
This is for middle
This is for middle
This is for middle
This is for middle
This is for middle
This is for middle
This is for middle
This is for middle
This is for middle
</div>
</div>
<div id=”r”>
This is right side
</div>
</div>
</body>
</html>
文章作者:admin
本文地址:http://www.cookseo.com/286.html
版权所有:网站SEO-网站优化 © 转载时必须以链接形式注明作者和原始出处!

你這個寫未免有點代碼太多了,我有一個更好的方式可以供參考一下:
<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>
呵呵,经常用到这样的布局。
| 借博主宝地!祝博主人气越来越旺|
zindex这个应该是个亮点,虽然我不太明白这些代码。
三列CSS的排版很精典的哦,呵
最近你忙着工作,人气越来越差了哦。
呵呵 不错。代码我看不懂。我晓得博主代码很牛的 中秋快到了,我祝福你中秋快乐 ,家庭幸福美满!今天我博客更新了一个“QQ好友IP查看器”喜欢的朋友欢迎下载。
对CSS我就只能一些最简单的了。
这个是比较基础的
学习了一下!好久没来了!
额 话说 我写不出来……
非常不错的代码!
谢谢分享了!!
呵呵,同意楼下的观点
你是不是故意发出来给百度看的啊,好让百度发现:哟,这还是个人才啊~~~~