一、 圣杯布局、

左右固宽，中间自适应

  • 三列布局，中间宽度自适应，两边定宽；
  • 中间部分要在浏览器中优先展示渲染；

具体步骤：
1.设置基本样式
2.圣杯布局是一种相对布局，首先设置父元素container的位置：
3.将主体部分的三个子元素都设置左浮动
4.设置main宽度为width:100%,让其单独占满一行
5.设置left和right 负的外边距
6.接下来只要把left和right分别移动到这两个留白就可以了。可以使用相对定位移动 left和right部分。

代码如下：

<!doctype html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>圣杯布局</title>

    <style>

        body{

            margin:0;

        }

        .box{

            margin:0 auto;

            width:900px;

            height:300px;

            background-color:orange;

            padding:0 200px;

        }

        .left{

            width:200px;

            height:300px;

            background-color:red;

            float:left;

            margin-left:-100%;

            position:relative;

            left:-200px;

        }

        .center{

            width:100%;

            height:300px;

            background-color:pink;

            float:left;

        }

        .right{

            width:200px;

            height:300px;

            background-color:blue;

            float:left;

            margin-left:-200px;

            position:relative;

            right:-200px;

        }

    </style>

</head>

<body>

<div class="box">

        <div class="center"></div>

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

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

</div>

</body>

</html>

效果图：

二、双飞翼布局

左右固宽，中间自适应

  • 左右两个div浮动，中间的div放在上面
  • 通过margin-left调整到一行
  • 中间div添加一个子节点，设置margin调整位置

代码如下：

<!doctype html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>双飞翼布局</title>

    <style>

        body{

            margin:0;

        }

        .box{

            margin:0 auto;

            width:900px;

            height:300px;

            background-color:orange;

        }

        .warp{

            margin:0 200px;

        }

        .left{

            width:200px;

            height:300px;

            background-color:red;

            float:left;

            margin-left:-100%;

        }

        .center{

            width:100%;

            height:300px;

            background-color:pink;

            float:left;

        }

        .right{

            width:200px;

            height:300px;

            background-color:blue;

            float:left;

            margin-left:-200px;

        }

    </style>

</head>

<body>

<div class="box">

    <div class="center">

        <div class="warp"></div>

    </div>

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

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

</div>

</body>

</html>

效果图：

持续更新 点歌关注吧！

css 布局（圣杯、双飞翼）的更多相关文章

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

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

  2. CSS布局-圣杯布局

    圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, . ...

  3. CSS布局 — 圣杯布局与双飞翼布局

    圣杯布局 实现原理 html代码中,middle部分首先要放在container的最前部分,然后是left,right 将三者都设置 float:left, position:relative (因为 ...

  4. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  5. CSS经典布局-圣杯布局、双飞翼布局

    圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...

  6. css布局笔记（三）圣杯布局，双飞翼布局

    圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下 <!-- 圣杯布局 --> <!DOCTYPE html> &l ...

  7. CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局

    圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...

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

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

  9. css两栏布局、圣杯布局、双飞翼布局

    最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...

  10. CSS布局之圣杯布局和双飞翼布局

    其实圣杯布局和双飞翼布局实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局.它们实现的效果都是一样的,差别在于其实现的思想. 一.圣杯布局 html代码中,将重要的内容 ...

随机推荐

  1. tom

    题目描述 众所周知,Tom 猫对香肠非常感兴趣.有一天,Tom 家里的女主人赏给了Tom 一大堆香肠.这些香肠太多了,以至于Tom 一顿吃不完,于是它把这些香肠串成了一棵树,树的每个节点上都有一个香肠 ...

  2. Linux测试端口的连通性的四种方法

    目录 1.telnet 2.ssh 3.crul 4.wget 方法一.telnet telnet为用户提供了在本地计算机上完成远程主机工作的能力,因此可以通过telnet来测试端口的连通性,具体用法 ...

  3. phpstorm中sass编译时目录或内容包含中文字符报错

    ruby版本:ruby 2.4.1p111 (2017-03-22 revision 58053) [x64-mingw32] sass版本:Sass 3.4.24 (Selective Steve) ...

  4. Vue&webpack入门实践

    目录 1. 下载安装Vue 2. Vue 2.1 Vue要素 2.2 指令 2.3 组件化 2.4 vue-router 3. webpack 3.1 webpack简介 3.2 四个核心概念 3.3 ...

  5. 使用Excel绘制F分布概率密度函数图表

    使用Excel绘制F分布概率密度函数图表 利用Excel绘制t分布的概率密度函数的相同方式,可以绘制F分布的概率密度函数图表. F分布的概率密度函数如下图所示: 其中:μ为分子自由度,ν为分母自由度 ...

  6. 什么是中间件？中间件和java应用关系是什么

    中间件,比如websphere 是一种独立的系统软件,你的java应用要通过它来管理,比如数据库连接,消息通信等,中间件位于操作系统之上.简单滴说,你不可能直接把你的java应用部署在操作系统上,得由 ...

  7. LR 场景设置

    LR 场景设置group:多个脚本按照独立设置模式跑,各个脚本可以单独设置虚拟用户.运行时间scenario:多个脚本之间按照相同模式跑,将总的虚拟用户数按照一定比例分配给各个脚本 schedule ...

  8. Python字典（一）

    数据类型 数据类型划分:可变.不可变 不可变数据类型:元组.bool.int.str  [可哈希] 可变数据类型:list,dict,set [可哈希] 字典格式 dic1={ key(键值):val ...

  9. java虚拟机规范(se8)——class文件格式(一)

    第四章 class文件格式 本章介绍了java虚拟机的class文件格式.每一个class文件包含一个单独的类或者接口的定义.虽然类和接口不一定都定义在文件中(比如类和接口亦可以通过类加载器直接生成) ...

  10. IT面试技巧（2）

    21.最能概括你自己的三个词是什么? 回答提示:我经常用的三个词是:适应能力强,有责任心和做事有始终,结合具体例子向主考官解释, 22.你的业余爱好是什么? 回答提示:找一些富于团体合作精神的,这里有 ...