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

 <!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. CentOS7修改密码 及 随后可能的报错处理(failed to load SELinux policy freezing)

    Centos7修改root密码: https://blog.csdn.net/shanvlang/article/details/80385913 估计不需要"SELinux,不要执行&qu ...

  2. 备份Oracle 数据库。

    #!/bin/bash# 2018-07-07 oracle database back#filename=`date +%Y%m%d`filename=`date +%Y_%m_%d_%H%M`di ...

  3. css3 渐变色兼容移动端

    .group_1 background #1a78f3 // 兼容不显示渐变色的浏览器 background: linear-gradient(180deg, #1a78f3 , #fff); bac ...

  4. 解决分布式事务基本思想Base和CPA理论、最终一致性|刚性事务、柔性事务

    在学习解决分布式事务基本思路之前,大家要熟悉一些基本解决分布式事务概念名词比如:CAP与Base理论.柔性事务与刚性事务.理解最终一致性思想,JTA+XA.两阶段与三阶段提交等. 如何保证强一致性呢? ...

  5. JavaSE---环境配置

    1.概述 1.1 PATH环境变量 a,Java程序   编译.运行时   需要用到java.javac命令,虽然计算机中已经安装了JDK,但是计算机不知道去哪里找这个命令: b,计算机如何查找命令呢 ...

  6. Java中如何修改Jar中的内容

    一.摘要 好长时间没写blog了,之前换了一家公司.表示工作更有战斗力了,可惜就是没时间写文章了.在这段时间其实是遇到很多问题的,只是都是记录下来,并没有花时间去研究解决.但是这周遇到这个问题没办法让 ...

  7. legend2---17、legend2里面怎么面向对象

    legend2---17.legend2里面怎么面向对象 一.总结 一句话总结: mvc本身挺优:本身mvc的开发模式,就算是面向过程下也还行,如果面向对象那就更加棒了 实体类无需属性:由于php的生 ...

  8. 65、salesforce的数据分页

    <apex:page controller="PagingController"> <apex:form > <apex:pageBlock titl ...

  9. SQL之in和like的连用实现范围内的模糊查询

    我们知道in可以实现一个范围内的查询,like可以实现模糊查询, 如 select *where col like 123%但是我们如果有一列attri,如123,132,165... 我们想实现12 ...

  10. Linux命令 who

    who :显示当前登入系统的用户信息 显示的内容主要包括: 用户名,登录终端,上线时间,停留时间,动作,UID等 权限:所有使用者 语法: who  [option] ...[ file | arg1 ...