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

 <!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. 一、Json

    一.Json遍历模糊查询 你没admin 所以这句话报错. //1.写法 dynamic query = from user in jsonObject where (user.ToString(). ...

  2. InnoDB的LRU淘汰策略

    Reference: https://time.geekbang.org/column/article/121710 InnoDB存储引擎是基于集合索引实现的数据存储,也就是除了索引列以及主键是存储在 ...

  3. springboot不能用 @SpringApplicationConfiguraction 解决方案

    @SpringApplicationConfiguraction  是在springboot 1.4之前,之后改用 @RunWith(SpringJUnit4ClassRunner.class) @S ...

  4. ajax中json格式数据如何朝后端发送数据

  5. hdu 5860 Death Sequence(递推+脑洞)

    Problem Description You may heard of the Joseph Problem, the story comes from a Jewish historian liv ...

  6. 【Flutter学习】一些重要的概念之of(context)方法

    在flutter中我们经常会使用到这样的代码 //打开一个新的页面 Navigator.of(context).push //打开Scaffold的Drawer Scaffold.of(context ...

  7. 根据一个经纬度坐标获取周边最近经纬。Java实现

    1.需求:指定一个经纬度坐标,如:(31.2121751783,121.4411213954).周围有一堆经纬度坐标,找出与它最近的那个. 2.实现思路:将给出经纬度看成原点(0,0).周围经纬度定位 ...

  8. mysql5.6配置-my

    # mkdir -p /home/mysql/3306/{data,binlog,logs} [client] port = socket=/tmp/my3306.sock [mysql] no-au ...

  9. 【从0到1，搭建Spring Boot+RESTful API+Shiro+Mybatis+SQLServer权限系统】04、统一处理异常

    本节讨论如何使用Spring的异常处理机制,当我们程序出现错误时,以相同的一种格式,把错误信息返回给客户端 1.创建一些自定义异常 public class TipsException extends ...

  10. 深入理解dijkstra+堆优化

    深入理解dijkstra+堆优化 其实就这几种代码几种结构,记住了完全就可以举一反三,所以多记多练多优化多思考. Dijkstra   对于一个有向图或无向图,所有边权为正(边用邻接矩阵的形式给出), ...