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

 <!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. shell字符串的空值检查

  2. vector<类指针>清理

    https://www.cnblogs.com/nanke/archive/2011/05/10/2042662.html 1.vector<class> &aa,作为函数参数 2 ...

  3. MyBatis注解开发-@Insert和@InsertProvider（@Select、@SelectProvider雷同）

    @Insert和@InsertProvider都是用来在实体类的Mapper类里注解保存方法的SQL语句.不同的是,@Insert是直接配置SQL语句,而@InsertProvider则是通过SQL工 ...

  4. 职责链模式ChainOfResponsibility

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11407114.html  1.定义 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合 ...

  5. jsp标签的介绍

    cankao:http://www.cnblogs.com/xdp-gacl/p/3788369.html jsp常用的标签有以下3个 1.<jsp:include>标签 2.<js ...

  6. Tomcat负载均衡图片显示不正常解决方法

    在部署一个Tomcat玩玩的时候,发现在做nginx负载均衡时,网站显示不正常,图片会变得很大.测试了半天都没成功,最后查找资料,才发现Tomcat负载均衡时Session处理有问题,Session是 ...

  7. HDU 3746 Cyclic Nacklace (KMP找循环节)

    题目链接:HDU 3746 Sample Input 3 aaa abca abcde Sample Output 0 2 5 Author possessor WC Source HDU 3rd & ...

  8. shell 过滤器(管道)

    将几个命令通过管道符组合在一起就是一个管道,通常,通过这种方式使用的命令就被称为过滤器. 过滤器会获得输入,通过某种方式修改其内容,然后将其输出. 常用的被用作过滤器使用的命令为: 1.awk---用 ...

  9. list列表操作（创建、增加、删除、取值）

    list ####(一)列表的创建[].追加(append,extend,insert).删除(remove.del.poop).修改 ##创建一个空列表.一个字符串列表.一个数字列表 lis0 = ...

  10. 03、python的基础-->str字符串的使用

    1.字符串首字母大写 s = "aksjdjjhfhdhjaGGGGkkk" s1 = s.capitalize() print(s1) 2.字符串全部字母大写 s = " ...