三列自适应布局的实现方式(兼容IE6+)
1.绝对定位方式
<div class="nm-3-lr">
<div class="aside-f">
<p>侧边栏1固定宽度</p>
</div>
<div class="main">
<p>绝对定位-主内容栏自适应宽度</p>
</div>
<div class="aside-s">
<p>侧边栏2固定宽度</p>
</div>
</div> <div class="nm-3-lc">
<div class="aside-f">
<p>侧边栏1固定宽度</p>
</div>
<div class="main">
<p>绝对定位-主内容栏自适应宽度</p>
</div>
<div class="aside-s">
<p>侧边栏2固定宽度</p>
</div>
</div> <div class="nm-3-cr">
<div class="aside-f">
<p>侧边栏1固定宽度</p>
</div>
<div class="main">
<p>绝对定位-主内容栏自适应宽度</p>
</div>
<div class="aside-s">
<p>侧边栏2固定宽度</p>
</div>
</div>
/* 普通布局 */
.nm-3-lr,
.nm-3-lc,
.nm-3-cr
{
min-width: 400px;
margin: 10px 0;
position: relative;
*zoom:;
}
/* 左中右 中间自适应 */
.nm-3-lr .aside-f{
position: absolute;
top:;
left:;
width: 200px;
}
.nm-3-lr .main{
margin: 0 210px;
}
.nm-3-lr .aside-s{
position: absolute;
top:;
right:;
width: 200px;
} /* 左中右 右侧自适应 */
.nm-3-lc .aside-f{
position: absolute;
top:;
left:;
width: 200px;
}
.nm-3-lc .main{
margin-left: 420px;
}
.nm-3-lc .aside-s{
position: absolute;
top:;
left: 210px;
width: 200px;
} /* 左中右 左侧自适应 */
.nm-3-cr .aside-f{
position: absolute;
top:;
right: 210px;
width: 200px;
}
.nm-3-cr .main{
margin-right: 420px;
}
.nm-3-cr .aside-s{
position: absolute;
top:;
right:;
width: 200px;
}
2.采用圣杯布局
<div class="bd-3-lr">
<div class="main">
<p>圣杯布局-主内容栏自适应宽度</p>
</div>
<div class="aside-f">
<p>侧边栏1固定宽度</p>
</div>
<div class="aside-s">
<p>侧边栏2固定宽度</p>
</div>
</div> <div class="bd-3-lc">
<div class="main">
<p>圣杯布局-主内容栏自适应宽度</p>
</div>
<div class="aside-f">
<p>侧边栏1固定宽度</p>
</div>
<div class="aside-s">
<p>侧边栏2固定宽度</p>
</div>
</div> <div class="bd-3-cr">
<div class="main">
<p>圣杯布局-主内容栏自适应宽度</p>
</div>
<div class="aside-f">
<p>侧边栏1固定宽度</p>
</div>
<div class="aside-s">
<p>侧边栏2固定宽度</p>
</div>
</div>
/* 圣杯布局 */
.bd-3-lr,
.bd-3-lc,
.bd-3-cr
{
min-width: 400px;
margin: 10px 0;
}
/* 左中右 中间自适应 */
.bd-3-lr {
zoom:;
overflow:hidden;
padding-left:210px;
padding-right:210px;
}
.bd-3-lr .main {
float:left;
width:100%;
}
.bd-3-lr .aside-f {
float: left;
width:200px;
margin-left: -100%; position:relative;
left: -210px;
_left: 210px; /*IE6 hack*/
}
.bd-3-lr .aside-s {
float: left;
width:200px;
margin-left: -200px; position:relative;
right: -210px;
} /* 左中右，右侧自适应 */
.bd-3-lc {
zoom:;
overflow:hidden;
padding-left:420px;
}
.bd-3-lc .main {
float:left;
width:100%;
}
.bd-3-lc .aside-f {
float: left;
width:200px;
margin-left: -100%;
position:relative;
left: -420px;
_left: 0px; /*IE6 hack*/
}
.bd-3-lc .aside-s {
float: left;
width:200px;
margin-left: -100%;
position:relative;
left: -210px;
_left: 210px; /*IE6 hack*/
} /* 左中右，左侧自适应 */
.bd-3-cr{
overflow: hidden;
padding-right: 420px;
}
.bd-3-cr .main {
width: 100%;
float: left;
}
.bd-3-cr .aside-f {
width: 200px;
float: left;
margin-left: -200px;
position: relative;
left: 210px;
}
.bd-3-cr .aside-s {
width: 200px;
float: left;
margin-left: -200px;
position: relative;
left: 420px;
}
3.采用双飞翼布局
<div class="df-3-lr">
<div class="df-main">
<div class="main-warp">
<p>双飞翼布局-主内容栏自适应宽度</p>
</div>
</div>
<div class="aside-f">
<p>侧边栏1固定宽度</p>
</div>
<div class="aside-s">
<p>侧边栏2固定宽度</p>
</div>
</div> <div class="df-3-lc">
<div class="df-main">
<div class="main-warp">
<p>双飞翼布局-主内容栏自适应宽度</p>
</div>
</div>
<div class="aside-f">
<p>侧边栏1固定宽度</p>
</div>
<div class="aside-s">
<p>侧边栏2固定宽度</p>
</div>
</div> <div class="df-3-cr">
<div class="df-main">
<div class="main-warp">
<p>双飞翼布局-主内容栏自适应宽度</p>
</div>
</div>
<div class="aside-f">
<p>侧边栏1固定宽度</p>
</div>
<div class="aside-s">
<p>侧边栏2固定宽度</p>
</div>
</div>
/* 双飞翼布局 */
.df-3-lr,
.df-3-lc,
.df-3-cr
{
margin: 10px 0;
}
/* 右侧栏固定宽度，左侧自适应 */
.df-rgt{
zoom:;
overflow: hidden;
}
.df-rgt .df-main{
float: left;
width: 100%;
}
.df-rgt .df-main .main-warp{
margin-right: 210px;
}
.df-rgt .aside{
width: 200px;
margin-left: -200px;
float: left;
} /* 左中右 中间自适应 */
.df-3-lr{
zoom:;
overflow: hidden;
}
.df-3-lr .df-main{
float: left;
width: 100%;
}
.df-3-lr .df-main .main-warp{ margin: 0 210px;
}
.df-3-lr .aside-f, .df-3-lr .aside-s{
width: 200px;
float: left;
}
.df-3-lr .aside-f{ margin-left: -100%;
}
.df-3-lr .aside-s{ margin-left: -200px;
} /* 左中右 右侧自适应 */
.df-3-lc{
zoom:;
overflow: hidden;
}
.df-3-lc .df-main{
width: 100%;
float: left;
}
.df-3-lc .df-main .main-warp{ margin-left: 420px;
}
.df-3-lc .aside-f, .df-3-lc .aside-s{
width: 200px;
float: left;
}
.df-3-lc .aside-f{
margin-left: -100%;
}
.df-3-lc .aside-s{
margin-left: -100%;
position: relative;
left: 210px;
} /* 左中右 左侧自适应 */
.df-3-cr{
zoom:;
overflow: hidden;
}
.df-3-cr .df-main{
width: 100%;
float: left;
}
.df-3-cr .df-main .main-warp{
margin-right: 420px;
}
.df-3-cr .aside-f, .df-3-cr .aside-s{
width: 200px;
float: left;
}
.df-3-cr .aside-f{
margin-left: -200px;
position: relative;
right: 210px;
}
.df-3-cr .aside-s{
margin-left: -200px;
}
整体效果：http://runjs.cn/detail/lvf5bmzq
三列自适应布局的实现方式(兼容IE6+)的更多相关文章
- CSS两列及三列自适应布局方法整理
布局 自适应 两列 三列 在传统方法的基础上加入了Flex布局并阐述各方法的优缺点,希望对大家有所帮助.先上目录: 两列布局:左侧定宽,右侧自适应 方法一:利用float和负外边距 方法二:利用外边距 ...
- CSS三列自适应布局（两边宽度固定，中间自适应）
https://blog.csdn.net/cinderella_hou/article/details/52156333 https://blog.csdn.net/wangchengiii/art ...
- 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...
- css 两列自适应布局的4种思路
前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和gri ...
- css实现等高布局 两栏自适应布局 三栏自适应布局
等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...
- css实现三栏自适应布局（两边固定，中间自适应）以及优缺点
方法一:绝对定位(absolute + margin) 原理:给左右两边的元素设置absolute,这样左右两边的元素脱离标准文档流的控制,中间的元素自然会上来,然后给中间的元素设置margin留出左 ...
- 关于CSS三列Float布局任务
任务目标 掌握HTML/CSS布局的概念 掌握盒模型的概念 掌握position与float的概念以及在布局时的用法 任务描述 使用 HTML 与 CSS 按照示意图;实现三栏式布局. 左右两栏宽度固 ...
- ch8 基于浮动的布局（两列浮动布局、三列浮动布局）
CSS布局技术的根本是3个基本概念:定位.浮动.外边距操纵. 只需要设置希望定位的元素的宽度,然后将它们向左或向右浮动.因为浮动的元素不再占据文档流中的任何空间,它们就不再对包围他们的块框产生任何影响 ...
- css两列自适应布局的多种实现方式及原理。
两列布局是非常常见的需求在实际项目中,实现的方式也有很多.究其原理也都不算复杂.这里主要提出几种实现方式和原理. html页面基本布局如下代码所示: 1 <div class="mai ...
随机推荐
- Linux与好莱坞电影
Linux与好莱坞电影 2009年底上映的<阿凡达>是电影特效的巅峰之作,除此之外还有<2012>每次观看之后总能让我们热血沸腾. 很早以前电影特效都 ...
- canvas：飞机大战
最开始我们要初始化信息,我们有五个状态,游戏封面,加载状态,运行状态,游戏暂停,游戏结束 我们还需要得分score,生命life var START = 1;//初始状态 var LOADING = ...
- action中json的应用
这篇文章重点介绍action中json数据的返回处理:假设须要看前端代码的一些特效或ajax的json接收,请看上一篇博客:http://blog.csdn.net/yangkai_hudong/ar ...
- docker进入容器的几种方法
一 启动进入容器指定bash 退出后容器关闭 [root@Centos-node3 ~]# docker run -it centos bash [root@83c6b25aca09 /]# 二 do ...
- ospp.vbs是什么文件？激活过程cscript ospp.vbs命令详解
ospp.vbs是什么文件?激活过程cscript ospp.vbs命令详解 在Office 2013激活过程中我们经常会用到cscript ospp.vbs这个命令.那么,很有必要来了解一下,osp ...
- Java Web学习总结（8）——使用Cookie进行会话管理
一.会话的概念 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 有状态会话:一个同学来过教室,下次再来教室,我们会知道这个同学曾 ...
- Android---- 获取当前应用的版本号和当前android系统的版本号
Android 应用程序获得版本号 我们可以在AndroidManifest.xml中设置程序的版本号等,如android:versionName="1.0",那如果想在代码中获取 ...
- 使用 STL 辅助解决算法问题
不要重复制造轮子,而且你造的轮子未必比得上别人的: <numeric>⇒ accumulate,累积容器中区间的和,可以指定初值: 为什么 STL 中的容器和算法一定关于区间的操作一定是左 ...
- 详解javascript的深拷贝与浅拷贝
1. 认识深拷贝和浅拷贝 javascript中一般有按值传递和按引用传递两种复制,按值传递的是基本数据类型(Number,String,Boolean,Null,Undefined),一般存放于内存 ...
- 学习笔记：Vue——混入
前言: 到现在用Vue做了不少项目了,用到的都是初阶的功能,很多高阶能力都没有用到.仅用初级阶段也能做项目,甚至是复杂项目,可见vue之强大,果然是渐进式开发方式. 但是本着虚心学习的态度,还是要抽空 ...