三列自适应布局的实现方式(兼容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 ...

随机推荐

【2017 Multi-University Training Contest - Team 7】Just do it
[Link]:http://acm.hdu.edu.cn/showproblem.php?pid=6129 [Description] 设定b[i]=a[1]^a[2]^a[3]^------a[i] ...
textview-调节字体间距跟行距
直接进行代码验证 1)当没有添加字体间距属性的时候 <TextView android:id="@+id/text_view" android:layout_width=&q ...
amazeui学习笔记一（开始使用3）--兼容性列表compatibility
amazeui学习笔记一(开始使用3)--兼容性列表compatibility 一.总结 1.不要用ie做前端测试,不要碰ie,尽量用google 浏览器: 按照微软官方的说法,IE 开发者工具中的浏 ...
iOS中学会如何对sqlite3 进行封装
#waring ---(看官注意) ---使用说明: ①在创建自定义model类之前让该类继承自文件中的Model类, ②为model类选一个NSString属性作为主键:(既,在初始化方法里面将从父 ...
1. 初识ZooKeeper。
转自:https://blog.csdn.net/en_joker/article/details/78661466 Apache ZooKeeper是由 Apache Hadoop的子项目发展而来, ...
vue实现一个会员卡的组件(可以动态传入图片（分出的一个组件）、背景、文字、卡号等)
自己在写这个组件的时候主要遇到的问题就是在动态传入背景图片或者背景色的时候没能立马顺利写出来,不过现在实现了这个简单组件就和大家分享一下 <template> <div class= ...
TabControl控件重绘
原文地址:http://www.codeproject.com/Articles/91387/Painting-Your-Own-Tabs-Second-Edition 在网上看到重绘TabContr ...
express，中间件(body-parser），req.body获取不到参数(含postman发请求的方法)
问题描述: 最近在做毕设,express 里边的中间件(body-parser)失效,req.body获取不到任何值,req.query能获取到值.一开始加body-parser中间件是有用的,直到昨 ...
java韩顺平老师视频有需要可以留言
java韩顺平老师视频有需要可以留言
libjpeg用法
libjpeg是一个完全用C语言编写的库,包含了被广泛使用的JPEG解码.JPEG编码和其他的JPEG功能的实现.这个库由独立JPEG工作组维护.最新版本号是6b,于1998年发布.可以参考维基百科关 ...

三列自适应布局的实现方式(兼容IE6+)

三列自适应布局的实现方式(兼容IE6+)的更多相关文章

随机推荐

热门专题