双飞翼：

<!DOCTYPE html>

<html>

<head>

    <title>推荐封面</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <style>

    body{margin: 0;padding: 0}

    /*非主要代码，用于测试*/

    #header,#footer{background: #fffebb;}

    #left,#right{background: #d6e7d3;}

    #center{background: #f5f5f5;}

    body {

      min-width: 630px;      /* 2x (LC fullwidth +

                                CC padding) + RC fullwidth */

    }

    #center {

        float: left;

        width: 100%;

    }

    #center .wrap{margin: 0 150px 0 200px;}

    #left {

        float: left;

        width: 200px;

        margin-left: -100%;

    }

    #right {

        float: left;

        width: 150px;

        margin-left: -150px;

    }

    #footer{clear: both;}

    /*设置3列等高*/

    #container {

      overflow: hidden;

    }

    #container .column {

      padding-bottom: 20010px;  /* X + padding-bottom */

      margin-bottom: -20000px;  /* X */

    }

    #footer {

      position: relative;

    }

    </style>

</head>

<body>

    <div id="header">header</div>

    <div id="container">

        <div id="center" class="column">

            <div class="wrap">main</div>

        </div>

        <div id="left" class="column">left</div>

        <div id="right" class="column">right</div>

    </div>

    <div id="footer">footer</div>

</body>

</html>

<script type="text/javascript" src="zepto.js"></script>

<script type="text/javascript">var tt,df,df;var   a =1;</script>

　　

圣杯：

<!DOCTYPE html>

<html>

<head>

    <title>推荐封面</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <style>

    body{margin: 0;padding: 0}

    /*非主要代码，用于测试*/

    #header,#footer{background: #fffebb;}

    #left,#right{background: #d6e7d3;}

    #center{background: #f5f5f5;}

    body {

      min-width: 630px;      /* 2x (LC fullwidth +

                                CC padding) + RC fullwidth */

    }

    #container {

        padding-left: 200px;

        padding-right: 150px;

    }

    #container .column{

        float: left;

        position: relative;

    }

    #center {

        width: 100%;

        padding: 10px 20px;/*如果中间区设置padding，宽度变宽了，left定位的right值也要增加左右padding那么多*/

    }

    #left {

        width: 200px;

        margin-left: -100%;

        right: 240px;/*Lwidth:200 centerPadding:20  right:200+20*2  */

    }

    #right {

        width: 150px;

        margin-right: -190px;/*Rwidth:150 centerPadding:20  right:150+20*2  */

    }

    #footer{clear: both;}

    /*** IE Fix ***/

    * html #left {

      left: 110px;/* RC fullwidth 150-20*2   */

    }

    /*设置3列等高*/

    #container {

      overflow: hidden;

      zoom:1;

      position: relative;

    }

    #container .column {

      padding-bottom: 20010px;  /* X + padding-bottom */

      margin-bottom: -20000px;  /* X */

    }

    #footer {

      position: relative;

    }

    </style>

</head>

<body>

    <!--圣杯html-->

    <div id="header">header</div>

    <div id="container">

        <div id="center" class="column">main dsaldf s;kf s;dkf a; <span style="background:red;height:100px;width:100px;display:inline-block;">sdfklsd</span> l ald  adlkla asdlk alkfa sda alsdkfa lsd asldfalsd falsdkf alsd fak sdllkf  dsaldf s;kf s;dkf a; sdfklsd l ald  adlkla asdlk alkfa sda alsdkfa lsd asldfalsd falsdkf alsd fak sdllkf </div>

        <div id="left" class="column">left</div>

        <div id="right" class="column">right</div>

    </div>

    <div id="footer">footer</div>

</body>

</html>

<script type="text/javascript" src="zepto.js"></script>

<script type="text/javascript">var tt,df,df;var   a =1;</script>

　　

圣杯VS双飞翼的更多相关文章

  1. CSS（五）圣杯，双飞翼布局

    双飞翼布局 <style> *{ margin:; padding:; } .main{ width: 100%; height: 200px; background: pink; flo ...

  2. 两列布局（浮动、定位、flex）和三列布局（圣杯、双飞翼、flex）

    demo 各种布局演示 https://jsfiddle.net/mayufo/qp890peq/1/ 两栏布局 浮动 <div class="box1"> <d ...

  3. CSS布局 -- 圣杯布局 & 双飞翼布局

    按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...

  4. CSS 圣杯布局 / 双飞翼布局的实现

    工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...

  5. CSS布局（圣杯、双飞翼、flex）

    圣杯布局(float + 负margin + padding + position) <!DOCTYPE html> <html> <head> <meta ...

  6. CSS 之 圣杯布局&双飞翼布局

    圣杯布局 和 双飞翼布局 是重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局. 遵循了以下要点: 两侧宽度固定,中间宽度自适应 中间部分在DOM结构上优先,以便先行 ...

  7. 三栏布局的三个典型方法（圣杯、双飞翼、flex）

    聊聊三栏布局----左右定宽,中间自适应. 效果图: 圣杯布局 <!DOCTYPE html> <html> <head lang="en"> ...

  8. 三栏布局只知道圣杯、双飞翼，最终评级是……F

    三栏布局,面试与工作中的常见布局.分左中右三部分,其中左右宽度已知,中间宽度自适应.根据不同的DOM顺序与CSS处理,这里写下了五类布局方式. 一.浮动布局 1 圣杯布局 L:"我问你,你就 ...

  9. css 布局（圣杯、双飞翼）

    一. 圣杯布局. 左右固宽,中间自适应 三列布局,中间宽度自适应,两边定宽: 中间部分要在浏览器中优先展示渲染: 具体步骤:1.设置基本样式2.圣杯布局是一种相对布局,首先设置父元素container ...

随机推荐

  1. MySQL多表连接

    主要分3种:内连接,外连接,交叉连接 其        他:联合连接,自然连接 1.内联接 典型的联接运算,使用像 =  或 <> 之类的比较运算).包括相等联接和自然联接. 内联接使用比 ...

  2. MIMO-OFDM通信系统学习笔记（一）

    [笔记一:单载波传输与多载波传输] MIMO-OFDM技术是3G-LTE,WiMAX通信系 统,以及WLan比如IEEE802.11a,IEEE802.11n等标准的关键技术,作为一枚通信狗,这些应该 ...

  3. 五个JS经典面试题

    1:Scope作用范围 1: (function() { 2: var a = b = 5; 3: })(); 4: 5: console.log(b); 什么会被打印在控制台上? 回答 上面的代码会 ...

  4. 两个异步处理AsyncTask和Handler的优缺点

    AsyncTask和Handler对比 1 ) AsyncTask实现的原理,和适用的优缺点 AsyncTask,是android提供的轻量级的异步类,可以直接继承AsyncTask,在类中实现异步操 ...

  5. nginx的配置,要求根据不同的来路域名，发送到不同的端口去处理

    这一台电脑上既有tomcat 也有 apache,他俩是没有办法同时享用80端口的.我现在让tomcat用8088,apache用8080,然后让nginx用80,这样nginx在收到请求后,根据不同 ...

  6. centos下安装eclipse-c++

    eclipse-c++ 1)编译器及工具链 yum install gcc gcc-c++ 2)开发工具包(JDK):下载网址:http://www.oracle.com/technetwork/ja ...

  7. hdu 5492 Find a path（dp+少量数学）2015 ACM/ICPC Asia Regional Hefei Online

    题意: 给出一个n*m的地图,要求从左上角(0, 0)走到右下角(n-1, m-1). 地图中每个格子中有一个值.然后根据这些值求出一个最小值. 这个最小值要这么求—— 这是我们从起点走到终点的路径, ...

  8. Php 笔记1-----request和 response

    不能大于2KB 第一次学习 php,  因为以前习惯了 .net, 所以 刚开始总是按照.net的  思路去思考, 怎么获取 客户端发过来的  request对象啊,  怎么设置response啊.. ...

  9. asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度

    介绍 使用许多小得JS.CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维 护性,这是一个很好的实践.但这样做反过来却损失了网站的性能.虽然你应该将你的Javascript代码写在小文件中 ...

  10. [转]Linux的tail 与head 命令

    转自:http://blog.csdn.net/carolzhang8406/article/details/6112707 head命令是用来查看具体文件的前面几行的内容,具体格式如下: head ...