三列自适应布局的实现方式(兼容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 ...
随机推荐
- golang sync.Cond
package main import ( "fmt" "sync" "time" ) func main() { wait := sync ...
- Native开发与JNI机制详解
本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 文/李森 博主导读:博主不是代码大师,研究什么都很深,Java除外,所以无论什么问题,方案可以提供, ...
- Java Servlet学习笔记（四）Servlet客户端Http请求
Servlet 客户端 HTTP 请求 当浏览器请求网页时,它会向 Web 服务器发送特定信息,这些信息不能被直接读取,因为这些信息是作为 HTTP 请求的头的一部分进行传输的.您可以查看 HTTP ...
- 洛谷 P1327 数列排序
P1327 数列排序 题目描述 给定一个数列{an},这个数列满足ai≠aj(i≠j),现在要求你把这个数列从小到大排序,每次允许你交换其中任意一对数,请问最少需要几次交换? 输入输出格式 输入格式: ...
- Redis-消费模式
一 . 两种模式简介 发布消息通常有两种模式:队列模式(queuing)和发布订阅模式(qublish-subscribe).队列模式中,consumers可以同时从服务端读取消息,每个消息纸杯其中一 ...
- UML学习之用例图
在UML的整个学习过程中,9种图(用例图.活动图.状态图.顺序图.类图.对象图.协作图.组件图.部署图)的学习以及常用开发.建模工具的使用是最为重要的一个阶段,它是进行UML建模的基础.在本篇文章中首 ...
- 用jquery获取单选按钮选中的内容 和 获取select下拉列表选中的值
1.<label><input name='reason' type='radio' value='您的评论内容涉嫌谣言' />您的评论内容涉嫌谣言</label> ...
- 逆波兰法（计算器）程序<无括号版>
涉及队列.栈的运用. Java中队列可以用: Queue<String> q = new LinkedList(); 来声明,其主要的方法有: poll(),peak(),offer(), ...
- css 0.5px
1. 利用css3新属性scale(好用推荐) 其实现的关键就是利用before或after伪元素,宽高同时设为200%,然后再缩放0.5,自然就是0.5px了 代码如下: div { positon ...
- nuxt.js配置BASE_URL（基本域名）和NODE_ENV（环境变量）
一直以来,开发环境和生产环境的数据接口域名不一样总是困扰着我 每次打测试包或者线上包,我都得手动切换域名,我相信很多人的做法跟这差不多,类似下面这样: (你已经注意到,这个文件已经被我无情的删除了,因 ...