要求：自适应宽度，左右两栏固定宽度，中间栏优先加载；

 <!DOCTYPE html>

 <html>

 <head>

     <title>layout</title>

     <style type="text/css">

         * {

             margin: 0;

             padding: 0px;

         }

         .wrap-2 {

             margin-top: 20px;

         }

         .header {

             background: #E81D1D;

             text-align: center;

         }

         /*对父元素浮动隐藏,然后三栏利用margin-bottom padding-bottom来实现等高*/

         .body {

             overflow: hidden;

         }

         .main-2 {

             float: left;

             width: 100%;

             margin-bottom: -9999px;

             padding-bottom: 9999px;

             background: #17A857;

         }

         .main-wrap-2 {

             padding: 0px 200px 0 200px;

         }

         /*margin-left是巧用来做合理的页面布局以至于不被挤到下一行*/

         .sub-2 {

             float: left;

             margin-left: -100%;

             width: 200px;

             background: #CEAE13;

             margin-bottom: -9999px;

             padding-bottom: 9999px;

         }

         .extra-2 {

             float: left;

             margin-left: -200px;

             width: 200px;

             background: #CEAE13;

             margin-bottom: -9999px;

             padding-bottom: 9999px;

         }

         .footer {

             background: #D114C0;

             text-align: center;

         }

     </style>

 </head>

 <body>

     <div class="wrap-2">

         <div class="header">Header</div>

         <div class="body">

             <div class="main-2">

                 <div class="main-wrap-2">

                     <p>main-wrap</p>

                     <p>main-wrap</p>

                 </div>

             </div>

             <div class="sub-2">

                 <p>sub</p>

                 <p>sub</p>

                 <p>sub</p>

             </div>

             <div class="extra-2">

                 <p>extra</p>

                 <p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p>

             </div>

         </div>

         <div class="footer">Footer</div>

     </div>

 </body>

 </html>

三点需要理解的

一、margin-bottom: -9999px;padding-bottom: 9999px;

原理：

同列的div设置一个父级 overflow:hidden 超出部分隐藏

给同列的div设置css margin-bottom:-10000px; padding-bottom:10000px;

这样就可以实现三列等高！

二、

41             margin-left: -100%;
50             margin-left: -200px;

原理：中间列浮动并且宽度是100%，则后面的div的浮动就会被挤到下一行，当使用margin左负值，超过自身的宽度时，这个元素在第一行就有位置了。
而margin的负值达到-100%时，恰能达到窗口最左侧。

三、中间栏优先加载的意思

由于浏览器的显示方式是从上到下一行一行解析代码的，所以如果要让中间列优先加载就需要将中间列的内容写在三列当中的最前页。
就是先写中间列的div的意思。。。

【CSS】三栏布局的经典实现的更多相关文章

  1. Css三栏布局自适应实现几种方法

    Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...

  2. css三栏布局方案整理

    日常开发中,经常会用到css三栏布局,现将工作中常用的css 三栏布局整理如下: 什么是三栏布局: 三栏布局,顾名思义就是两边固定,中间自适应. 一. float布局 <!DOCTYPE htm ...

  3. 三种方法实现CSS三栏布局

    本文由云+社区发表 作者:前端林子 本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果 1.方法一:自身浮动的方法 实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来 ...

  4. CSS三栏布局

    一.绝对定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  5. CSS三栏布局的四种方法

    总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...

  6. CSS 三栏布局入门

    首先,我是CSS盲[只听说过box model],没动手实践过,关于margin padding只知名称,不明细节.刚看过一叶斋大哥关于css布局的博文,再动手实践,动手记录下点滴积累以备后用. &l ...

  7. 前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应

    前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...

  8. CSS布局——三栏布局

    说到三栏布局,很多都会提到圣杯布局和双飞翼布局这两个经典的三栏布局方式.于是,我在网上搜了一些相关资料,阅读并跟着代码敲了一遍,发现在处理三栏布局上,他们采用的都是两边栏固定,中间栏自适应的策略.在处 ...

  9. ccs之经典布局（二）（两栏，三栏布局）

    接上篇ccs之经典布局(一)(水平垂直居中) 四.两列布局 单列宽度固定,另一列宽度是自适应. 1.float+overflow:auto; 固定端用float进行浮动,自适应的用overflow:a ...

随机推荐

  1. 最新版WinRAR5.61去广告代码教程分享（仅供学习交流）

    最新版WinRAR5.61去广告代码教程分享(仅供学习交流) 第一步:到WinRAR官网www.rarlab.com下载自己需要的版本,选择Chinese Simplified 64bit 安装即可. ...

  2. mybatis-generator 代码自动生成插件

    Hibernate 可以选择MyEclipse Datebase Explorer 或者是 Hibernate-tools 等工具来自动生成映射文件和实体类. mybatis 当然也要有!下面简单介绍 ...

  3. Session的load和get方法区别是什么？

    ①如果没有找到符合条件的记录,get方法返回null值,而load方法会抛出异常: ②get方法直接返回实体类对象,load方法返回实体类对象的代理: ③在Hibernate3之前,get方法只在一级 ...

  4. PHP7.1以上版本 count()报错

    报错信息如下: count(): Parameter must be an array or an object that implements Countable (View: D:\fookusy ...

  5. 使用KEIL C51实现的简单合作式多任务操作系统内核（单片机实现版本）

    基于网上网友的代码,自己在单片机上实现, 特此记录分享之. 基于https://blog.csdn.net/yyx112358/article/details/78877523 //使用KEIL C5 ...

  6. 【leetcode】901. Online Stock Span

    题目如下: 解题思路:和[leetcode]84. Largest Rectangle in Histogram的核心是一样的,都是要找出当前元素之前第一个大于自己的元素. 代码如下: class S ...

  7. Axure 部件的交互样式

    选中的 时  需要设置事件

  8. I2C_24c02实验

    一.RCC初始化 /* Setup the microcontroller system. Initialize the Embedded Flash Interface, initialize th ...

  9. 探索Redis设计与实现8：连接底层与表面的数据结构robj

    本文转自互联网 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial ...

  10. 如何将当前平台升级到SonarQube7.9？[最新]

    整体思路 准备测试数据(实际环境可跳过此步骤) 数据库迁移(从版本7.9开始,SonarQube将不再支持MySQL,Mysql-->PG) Sonar版本升级(6.7.7 -> 7.9. ...