三列自适应布局的实现方式(兼容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 ...
随机推荐
- ubuntu搭建交叉编译环境makeinfo: command not found
解决办法:sudo apt-get install texinfo
- 微信小程序弹框提示绑定手环实例
今天想聊一聊小程序里面存在的一些逻辑问题,拿手上的这个小程序来说,(这个小程序是开发出来玩的,每个人手上有一个手环,带着手环时候的心率,运动步数,血压数据都会展现在这个小程序里面,一目了然)用户第一次 ...
- 【Good Bye 2017 B】 New Year and Buggy Bot
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举一下全排列.看看有多少种可以到达终点即可. [代码] #include <bits/stdc++.h> using ...
- 洛谷 P2026 求一次函数解析式
P2026 求一次函数解析式 题目背景 做数学寒假作业的怨念…… 题目描述 给定两个整点的坐标,求它们所在直线的函数解析式(一次函数). 输入输出格式 输入格式: 输入共两行. 第一行有两个整数x1, ...
- Apache httpd.conf 配置文件语法验证
Apache 的 httpd.conf文件改动之后,必须重新启动server才干生效. 有时server在提供服务的时候,直接更改配置,重新启动服务.会带来非常大的危急性. 假设能在改动配置之后,先验 ...
- Java 函数的参数说
java函数参数传递的到底是值还是引用对确实容易让人迷糊.而很多时候因为对这个问题的模糊甚至造成一些错误.最常见的说法是基本类型传的是值,对象传的引用.对于基本类型,大家都达成共识,没有什么可以争论的 ...
- Java – Reading a Large File Efficiently--转
原文地址:http://www.baeldung.com/java-read-lines-large-file 1. Overview This tutorial will show how to r ...
- IDEA配置svn地址方法及出现的问题的解决办法
1.在IDEA中点击File-Settings里面,如图所示,选择你本地装的svn的exe路径: 2.在如图所示菜单中配置svn地址: 问题1:如果svn路径下没有exe文件,则是装svn的时候没有安 ...
- [Angular & Web] Retrieve user data from Session
Once user sign up, we store the user data inside cookie in the broswer and also keep a memory copy i ...
- [React] Theme your application with styled-components and "ThemeProvider"
In this styled-components lesson, we set a "primary color" within a UI "theme" o ...