位置：首页>> 网络编程>> 网页设计>> CSS布局之浮动（三）自适应

CSS布局之浮动（三）自适应

作者：Prower　来源：Prower　发布时间：2008-08-19 12:49:00　

标签：布局,浮动,css

两列布局的定宽自适应已经详解了，三列浮动中有两列定宽一列自适应的也详解了，那么该说说三列浮动中两列自适应一列定宽的布局了。

中间定宽，左右两侧自适应：

左右两侧定宽中间自适应的布局已经完成了，那么是否可以反过来呢？让中间定宽，而左右两侧自适应呢？答案是当然可以！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>

同样的三列结构，变换的只是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即可解决：

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;}

于是中间列定宽，左右两侧自适应的三列浮动布局就解决了。

投稿

CSS布局之浮动（三）自适应

猜你喜欢