CSS布局之浮动（三）自适应
作者：Prower 来源：Prower 时间：2008-08-19 12:49:00
两列布局的定宽自适应已经详解了，三列浮动中有两列定宽一列自适应的也详解了，那么该说说三列浮动中两列自适应一列定宽的布局了。
中间定宽，左右两侧自适应：
左右两侧定宽中间自适应的布局已经完成了，那么是否可以反过来呢？让中间定宽，而左右两侧自适应呢？答案是当然可以！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;}
于是中间列定宽，左右两侧自适应的三列浮动布局就解决了。
0
投稿猜你喜欢
解读tf.keras.layers模块中的函数
python正则表达式re.match()匹配多个字符方法的实现
SQL入侵恢复xp_cmdshell方法总结
互联网产品设计师自我介绍
Python3.6笔记之将程序运行结果输出到文件的方法
关于Python使用turtle库画任意图的问题
JavaScript中实现字符串的取左取右（实现left和right功能）
用Python实现一本个性化日历
MySQL数据库升级的一些"陷阱"
关于计算到期时间的问题
python简单猜数游戏实例
Python 3 使用Pillow生成漂亮的分形树图片
解释执行和编译执行的区别？
让ThinkPHP的模板引擎达到最佳效率的方法详解
使用Go实现优雅重启服务功能
Mysql使用索引实现查询优化
Python sklearn中的K-Means聚类使用方法浅析
用vuex写了一个购物车H5页面的示例代码
pycharm创建并使用虚拟环境的详细图文教程
