两列布局的定宽自适应已经详解了，三列浮动中有两列定宽一列自适应的也详解了，那么该说说三列浮动中两列自适应一列定宽的布局了。
中间定宽，左右两侧自适应：
左右两侧定宽中间自适应的布局已经完成了，那么是否可以反过来呢？让中间定宽，而左右两侧自适应呢？答案是当然可以！HTML结构代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS浮动</title>
</head>
<body>
<div id=”a”>我是左边</div>
<div id=”b”>我是中间</div>
<div id=”c”>我是右边</div>
</body>
</html>
同样的三列结构，变换的只是CSS代码：
#a{background:#aaa; float:left; margin-left:-100px; width:50%;}
#b{width:200px; background:#f00; float:left;}
#c{background:#777; width:50%; float:right; margin-right:-100px;}
我们让中间列居中显示，也就是让左右两侧的宽度各占50%，然后各减去中间栏占的100px，于是效果达到了。可是当预览的时候就会发现三个问题：
1、左右两侧的内容部分各被截取了宽度为100px的内容；
2、左右两侧的内容延伸到浏览器边缘，超出了<body />标签默认的宽度；
3、由于IE的BUG，当缩放IE浏览器的时候右侧会掉下去，造成显示错位。
要解决1、2两个问题，只需要在内容处嵌套DIV即可解决：
<div id=”box”>
<div id=”a”><div id=”contentA”>我是左边</div></div>
<div id=”b”>我是中间</div>
<div id=”c”><div id=”contentB”>我是右边</div></div>
</div>
CSS代码如下：
#box{width:100%; overflow:hidden;}
#a{background:#aaa; float:left; margin-left:-100px; width:50%;}
#b{width:200px; background:#f00; float:left;}
#c{background:#777; width:50%; float:right; margin-right:-100px;}
#contentA{margin-left:100px;}
#contentB{margin-right:100px;}
内容溢出的问题截取了，但是在IE下缩放的问题还是存在，于是就需要使用到绝对定位，设中间列为绝对定位：
#b{width:200px; background:#f00; position:absolute; left:50%; margin-left:-100px;}
于是中间列定宽，左右两侧自适应的三列浮动布局就解决了。
站长工具
相关文章
请稍等，评论加载中...