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

 <!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. runtime之归档和解档

    IOS开发之NSCoding协议(使用runtime)近期学习IOS的runtime库,然后看到之前写的NSCoding协议有点复杂,如果属性少还好,如果100多个属性,则会显得麻烦.下面使用常规方式 ...

  2. Sql 将A表数据插入到B表

    A表和B表字段不同 --insert into B(Name,PersonalId,Education,IsDel) select Name, PersonId as PersonalId, ( ca ...

  3. Supervisor 在ubuntu系统下添加自启动

    最近在使用frp内网穿透,以便自己的工具能在外网访问.自己内网主机有时需要重启,为了工具能正常访问,所以使用supervisor工具进行进程管理,supervisor的自启动成个很必要的需求.下面简单 ...

  4. Tensorflow读取大数据集的方法，tf.train.string_input_producer()和tf.train.slice_input_producer()

    1. https://blog.csdn.net/qq_41427568/article/details/85801579

  5. WinForm解决UI假死

    运行WinForm程序时,如果后台执行比较费时的操作,前天UI就会假死卡住,很影响使用感受,这里我们简单的解决一下这个问题 using System; using System.Collections ...

  6. 【串线篇】MyBatis简介

    一.MyBatis 和数据库进行交互:持久化层框架(SQL映射框架): 1).纯手工 从原始的JDBC----dbutils(QueryRunner)-------JdbcTemplate----xx ...

  7. java SSLContext

    1. 什么是SSLSocket JDK文档指出,SSLSocket扩展Socket并提供使用SSL或TLS协议的安全套接字. 这种套接字是正常的流套接字,但是它们在基础网络传输协议(如TCP)上添加了 ...

  8. 洛谷P1364 医院设置（Floyd）

    题目描述 设有一棵二叉树,如图: 其中,圈中的数字表示结点中居民的人口.圈边上数字表示结点编号,现在要求在某个结点上建立一个医院,使所有居民所走的路程之和为最小,同时约定,相邻接点之间的距离为l.如上 ...

  9. springcloud的config

    CONFIG服务端 加入依赖: <dependency> <groupId>org.springframework.cloud</groupId> <arti ...

  10. Cisco基础(六)：配置目前网络环境、项目阶段练习

    一.配置目前网络环境 目标: 一家新创建的IT公司,公司位于北京有80多台服务器 目前网络环境使用技术,通过端口映射技术将web服务器发布给Internet: 三层交换:汇聚接入层交换机 默认路由:实 ...