三列自适应布局的实现方式(兼容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 ...
随机推荐
- 将二级目录下的文件合并成一个文件的Python小脚本
这个小程序的目的是将二级目录下的文件全部合并成一个文件(其实几级目录都可以,只要做少许改动) #coding:utf8 import sys, os def process(path): new_fi ...
- CISP/CISA 每日一题 22
CISSP 每日一题(答)What should be done to verify patcheshave been applied? Auditpatches, or use a vulnerab ...
- Shiro学习总结（10）——Spring集成Shiro
1.引入Shiro的Maven依赖 [html] view plain copy <!-- Spring 整合Shiro需要的依赖 --> <dependency> <g ...
- Stack switching mechanism in a computer system
A method and mechanism for performing an unconditional stack switch in a processor. A processor incl ...
- IDFA和IMEI
这里有一些解释: https://www.zhihu.com/question/38856446
- Android 调试出现 could not get wglGetExtensionsStringARB
解决 AVD Manager -> 选择模拟器 -> 点击 Edit看 Enabled 是不是被选中了.是的话取消选中,OK.希望对你实用.
- Ubuntu配置sublime text 3的c编译环境
新建编译系统 c语言 选择tool –> Build System –> New Build System 然后输入下面代码 { "shell_cmd": " ...
- 玩转Bootstrap（基础） -- （6.导航条基础）
1.导航条样例 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- Android时间戳与字符串相互转换
import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; public cl ...
- 【2017中国大学生程序设计竞赛 - 网络选拔赛 hdu 6150】Vertex Cover
[链接]点击打开链接 [题意] 有人写了一个最小点覆盖的贪心算法,然后,让你去hack它. 并且,要求这个算法得到的错误答案,是正确答案的三倍. 让你任意输出hack数据,点数<=500 [题解 ...