聊聊三栏布局----左右定宽，中间自适应。

效果图：

圣杯布局

<!DOCTYPE html>

<html>

<head lang="en">

<title>圣杯</title>

<style>

.container{

    padding:0 200px 0 180px;

    height:100px;

}

.left{

    float:left;

    width:180px;

    height:100px;

    margin-left:-100%;

    background:red;

    position:relative;

    left:-180px;

}

.main{

    float:left;

    width:100%;

    height:100px;

    background:blue;

}

.right{

    float:left;

    width:200px;

    height:100px;

    margin-left:-200px;

    background:green;

    position:relative;

    right:-200px;

}

</style>

</head>

<body>

<div class="container">

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

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

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

</div>

</body>

</html>

双飞翼布局

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>双飞翼</title>

    <style>

.main{

    float:left;

    width:100%;

    height:100px;

    background:blue;

}

.left{

    float:left;

    width:180px;

    height:100px;

    margin-left:-100%;

    background:red;

}

.right{

    float:left;

    width:200px;

    height:100px;

    margin-left:-200px;

    background:green;

}

.inline{

margin:0 200px 0 180px;

}

</style>

</head>

<body>

  <div class="main">

    <div class="inline">middle</div>

  </div>

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

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

</body>

</html>

注意：一定要在要在main中再包裹一个<div>并设置它的margin:0 180px 0 200px。

Flex布局

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Flex</title>

    <style>

.flex {

    display: flex;

    flex-flow: row;

}

.left{

    width: 180px;

    height: 100px;

    background-color: red;

}

.main{

    flex: 1;

    height: 100px;

    background-color: blue;

}

.right {

    width: 200px;

    height: 100px;

    background-color: green;

}

    </style>

</head>

<body>

<div class="flex">

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

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

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

</div>

</body>

</html>

最重要的还是要理解浮动和负margin技术以及width:100%。

三栏布局的三个典型方法（圣杯、双飞翼、flex）的更多相关文章

  1. Css三栏布局自适应实现几种方法

    Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...

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

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

  3. ccs之经典布局（二）（两栏，三栏布局）

    接上篇ccs之经典布局(一)(水平垂直居中) 四.两列布局 单列宽度固定,另一列宽度是自适应. 1.float+overflow:auto; 固定端用float进行浮动,自适应的用overflow:a ...

  4. 三种方法实现CSS三栏布局

    本文由云+社区发表 作者:前端林子 本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果 1.方法一:自身浮动的方法 实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来 ...

  5. CSS三栏布局的四种方法

    总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...

  6. 假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法

    假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应的五种方法 HTML CSS 页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应 <!D ...

  7. CSS系列，三栏布局的四种方法

    三栏布局.两栏布局都是我们在平时项目里经常使用的,今天我们来玩一下三栏布局的四种写法,以及它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 ...

  8. 布局：高度已知，布局一个三栏布局，左栏和右栏宽度为200px，中间自适应

    需求:高度已知为200px,写出三栏布局,左栏和右栏各位200px,中间自适应,如下图所示: 方法一:float浮动布局 原理是:定义三个区块,需要注意的是中间的区块放在右边区块的下面,统一设置高度为 ...

  9. CSS三栏布局

    一.绝对定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

随机推荐

  1. 大数据笔记（二）——Apache Hadoop的体系结构

    一.分布式存储 NameNode(名称节点) 1.维护HDFS文件系统,是HDFS的主节点. 2.接收客户端的请求:上传.下载文件.创建目录等. 3.记录客户端操作的日志(edits文件),保存了HD ...

  2. 2018-2019-2 20175214 实验三《敏捷开发与XP实践》实验报告

    一.实验内容 1.编码标准:在IDEA中使用工具(Code->Reformate Code)把下面代码重新格式化,再研究一下Code菜单,找出一项让自己感觉最好用的功能.提交截图,加上自己学号水 ...

  3. 接上SQL SERVER的锁机制（一）——概述（锁的种类与范围）

    二.完整的锁兼容性矩阵(见下图) 对上图的是代码说明:见下图. 三.下表列出了数据库引擎可以锁定的资源. 名称 资源 缩写 编码 呈现锁定时,描述该资源的方式 说明 数据行 RID RID 9 文件编 ...

  4. Ubuntu 系统搭建LNMP环境

    当前Linux版本:Ubuntu16.04 一.安装Nginx 在终端中输入命令 " sudo apt-get install nginx ",在确认安装完成后,在浏览器中访问 l ...

  5. ps 等程序的选项的三种风格

    unix options bsd options gnu long options unix options, which may be grouped and must be preceded by ...

  6. Linux 服务器安全优化

    最小的权限+最少的服务=最大的安全 所以,无论是配置任何服务器,我们都必须把不用的服务关闭.把系统权限设置到最小,这样才能保证服务器最大的安全.下面是CentOS服务器安全设置,供大家参考. 一.注释 ...

  7. 解决sql语句中参数为空（null）不会更新参数的问题

    用的mybatis自动生成的 情景: 修改页面中,修改某个字段,修改前有数据,修改后为空. mybatis中一般用到 如:(这种直接忽略为空的字段,不能更新空字段参数) <update id=& ...

  8. 建立 Active Directory域 ----学习笔记

    第五章 建立 Active Directory域 1.工作组和域的理解 ​ a.工作组是一种平等身份环境,各个计算机之间各个为一个独立体,不方便管理和资源共享. ​ b.域环境一般情况下满足两类需求, ...

  9. Web前端开发 --》 如何实现页面同时在移动端和pc端的兼容问题

    很简单,只需要在html文件中对你引入的css进行一个类似于媒体查询的操作 <!DOCTYPE html> <html lang="en"> <hea ...

  10. SET ANSI_NULLS ON SET QUOTED_IDENTIFIER ON 什么意思 sql server 2005 2008

    原文:http://www.cnblogs.com/ForFreeDom/archive/2009/10/16/1584680.html 在sqlserver2005或SQL2008数据库项目中,创建 ...