css布局自适应
布局一般就是 左右2栏目(其中一栏固定 一栏自适应) 左中右3栏(一般中间自适应)
2栏目
左边固定 右边自适应 外围容器90%
写法一
左边 左浮动 右边不浮动 设置margin-left ：numpx num为左边的宽度
这种写法的好处
简单 容易看懂 兼容性好 切不用引进多余的元素
不好的地方
ie6下有3像素的bug 其他的问题好像没发现
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ceshi</title>
<style type="text/css">
*{margin:0;padding:0;}
.warp{width:90%; border:1px solid #000; min-width:500px; margin:0 auto;}
.warp .l{width:200px; background-color:#066; height:300px; float:left;word-wrap: break-word;}
.warp .m{background-color:#FC6; height:300px; margin-left:200px;word-wrap: break-word;;}
</style>
</head>
<body>
<div class="warp">
<div class="l">
<div>111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</div>
<div class="m">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>
</body>
</html>
写法二
右边自适应的在前面 可以让自适应的东东先加载左浮动 然后左边的那块margin-left:-100%到左边来
好处
可以让右边的东西先加载出来
坏处
ie6下有问题 另外多引进了inne的div
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8">
<title>无标题文档</title>
<style>
html,body{margin:0;padding:0;}
.warp{width:90%; border:1px solid #000; min-width:500px; margin:0 auto;}
.m{width:100%;float:left;}
.inner{margin-left:200px;background:#093;height:300px;word-wrap: break-word;}
.l{float:left;width:200px;margin-left:-100%;background:#09F;height:300px;word-wrap: break-word;}
</style>
</head>
<body>
<div class="warp">
<div class="m">
<div class="inner">111111111111111</div>
</div>
<div class="l">222222222222222222222222222222222222222222222222222222222</div>
</div>
</body>
<ml>
写法三
右边自适应的在前面 右浮动 同时magin-left:-numpx; num为左边的宽度 然后左边的左浮动
好处
好像还没发现兼容性的问题
坏处
多引进了一个元素
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8">
<title>无标题文档</title>
<style>
html,body{margin:0;padding:0;}
.warp{width:90%; border:1px solid #000; min-width:500px; margin:0 auto;}
.m{width:100%;float:right; margin-left:-200px;}
.inner{margin-left:200px;background:#093;height:300px;word-wrap: break-word;}
.l{float:left;width:200px;background:#09F;height:300px;word-wrap: break-word;}
</style>
</head>
<body>
<div class="warp">
<div class="m">
<div class="inner">111111111111111</div>
</div>
<div class="l">222222222222222222222222222222222222222222222222222222222</div>
</div>
</body>
<html>
3栏目
写法一
和2栏目的第一个是一样的
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
html,body{margin:0;padding:0;}
.warp{ width:90%; margin:0 auto; overflow:hidden;}
.warp .l{ height:300px; width:200px; float:left; background:#F00;word-wrap: break-word;}
.warp .r{ height:300px; width:300px; float:right; background:#00F;word-wrap: break-word;}
.warp .m{ height:300px; background:#0F0; margin:0 300px 0 200px;word-wrap: break-word;}
</style>
</head>
<body>
<div class="warp">
<div class="l">111111111111111111111111111111111111111111111111111111111111111</div>
<div class="r">222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div>
<div class="m">3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</div>
</div>
</body>
</html>
写法2
更上面的第2个一样的
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
html,body{margin:0;padding:0;}
.warp{ width:90%; margin:0 auto; overflow:hidden;}
.warp .m{width:100%;float:left; }
.warp .m .inner{height:300px;background:#0F0; margin-left:200px;margin-right:300px;word-wrap: break-word;}
.warp .l{ width:200px; height:300px; background:#F00; float:left; margin-left:-100%;word-wrap: break-word;}
.warp .r{width:300px; height:300px; background:#F90;float:left; margin-left:-300px;word-wrap: break-word;}
</style>
</head>
<body>
<div class="warp">
<div class="m">
<div class="inner">1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</div>
<div class="l">2222222222222222222222222222222222222222222222222222222222222222222222222222222222</div>
<div class="r">33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</div>
</div>
</body>
</html>
版权声明：本文为博主原创文章，未经博主允许不得转载。
分享到：
相关推荐
CSS3自适应浏览器页面框架布局代码是一款非常简单的网站后台界面布局效果，代码也非常少。
插件描述：CSS3自适应手机布局. 参考示例：http://www.jq22.com/jquery-info5613
div+css菜单导航布局自适应宽度，纯div+css
采用css的flex布局插入hightchart和Echart图表； 图表采用官方实例代码
纯CSS圆角自适应宽度的导航菜单，水平布局的网站菜单，这个菜单的亮点有两个：1、圆角，2、宽度自适应。不管各个菜单项的菜单文字有多长，该项菜单的背景始终自动适合这种变化，完美的宽度自适应特效，值得推荐。
主要为大家分享CSS自适应布局思路，对CSS布局样式感兴趣的小伙伴们可以参考一下
CSS3自适应浏览器页面框架特效是一款后台界面布局效果代码。
介绍流体布局的实现原理和方法 自适应css布局
div+css高度自适应网页布局，子div含float，父div高度自适应，已经通过测试的浏览器：ie6、ie7、ie8、火狐、Chrome。 代码来源： http://www.positioniseverything.net/articles/onetruelayout/equalheight
PC网站HTML布局自适应窗口大小.zip
自适应css布局 流动布局新时代
html+css+个人博客自适应布局，对于自适应网页布局可以参考
CSS3自适应手机布局
非常实用的特效代码，可以完美运行，可以二次修改！
使用css实现的三列布局，中间一列宽度固定大小，两边宽度要自适应。
12天学会DIV+CSS从理论到实践的教程，强烈推介。 第一天：选择什么样的DOCTYPE ...第八天：CSS布局入门 第九天：第一个CSS布局实例 第十天：自适应高度 十一天：不用表格的菜单 十二天：校验及常见的错误
假设高度已知，请写出三栏布局，其中左右宽度均为300px，中间自适应。 看了上面的题目，有经验的人也许会觉得很简单，仔细想想，如果我们来写，能写出几种方案呢？一般都会想到两种吧，float和position定位，其实...
div+css模板布局 右侧固定，左侧自适应