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

效果图：

圣杯布局

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <title>圣杯</title>
  5. <style>
  6. .container{
  7.     padding:0 200px 0 180px;
  8.     height:100px;
  9. }
  10. .left{
  11.     float:left;
  12.     width:180px;
  13.     height:100px;
  14.     margin-left:-100%;
  15.     background:red;
  16.     position:relative;
  17.     left:-180px;
  18. }
  19. .main{
  20.     float:left;
  21.     width:100%;
  22.     height:100px;
  23.     background:blue;
  24. }
  26. .right{
  27.     float:left;
  28.     width:200px;
  29.     height:100px;
  30.     margin-left:-200px;
  31.     background:green;
  32.     position:relative;
  33.     right:-200px;
  34. }
  36. </style>
  37. </head>
  38. <body>
  39. <div class="container">
  40.   <div class="main">middle</div>
  41.   <div class="left">left</div>
  42.   <div class="right">right</div>
  43. </div>
  44. </body>
  45. </html>

双飞翼布局

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>双飞翼</title>
  6.     <style>
  7. .main{
  8.     float:left;
  9.     width:100%;
  10.     height:100px;
  11.     background:blue;
  12. }
  13. .left{
  14.     float:left;
  15.     width:180px;
  16.     height:100px;
  17.     margin-left:-100%;
  18.     background:red;
  19. }
  20. .right{
  21.     float:left;
  22.     width:200px;
  23.     height:100px;
  24.     margin-left:-200px;
  25.     background:green;
  26. }
  27. .inline{
  28. margin:0 200px 0 180px;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33.   <div class="main">
  34.     <div class="inline">middle</div>
  35.   </div>
  36.   <div class="left">left</div>
  37.   <div class="right">right</div>
  38. </body>
  39. </html>

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

Flex布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Flex</title>
  6.     <style>
  7. .flex {
  8.     display: flex;
  9.     flex-flow: row;
  10. }
  11. .left{
  12.     width: 180px;
  13.     height: 100px;
  14.     background-color: red;
  15. }
  16. .main{
  17.     flex: 1;
  18.     height: 100px;
  19.     background-color: blue;
  20. }
  21. .right {
  22.     width: 200px;
  23.     height: 100px;
  24.     background-color: green;
  25. }
  26.     </style>
  27. </head>
  28. <body>
  29. <div class="flex">
  30.     <div class="left">left</div>
  31.     <div class="main">middle</div>
  32.     <div class="right">right</div>
  33. </div>
  34. </body>
  35. </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. 编写灵活、稳定、高质量的HTML代码的规范

    一.唯一定律 无论有多少人共同参与同一项目,一定要确保每一行代码都像是唯一个人编写的. 二.HTML 2.1 语法 (1)用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现 ...

  2. 手把手教你学Vue-3(路由)

    1.路由的作用 1.当我们有多个页面的时候 ,我们需要使用路由,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 简单的路由 const ro ...

  3. Model 层

    package com.test.mvp.mvpdemo.mvp.v1.model; import com.test.mvp.mvpdemo.mvp.v1.MainContract; import o ...

  4. 【HTML】<!DOCTYPE html>作用

    1.定义: DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档. <!DOCTYPE> 声明 ...

  5. flex 数字上标

    以A的3次方为例,我们输入以下代码: /** * 部分代码参考Adobe文档: * http://help.adobe.com/zh_CN/AS3LCR/Flash_10.0/flash/text/e ...

  6. 007-Spring Boot-@Enable*注解的工作原理-EnableConfigurationProperties、ImportSelector、ImportBeanDefinitionRegistrar

    一.@Enable* 启用某个特性的注解 1.EnableConfigurationProperties 回顾属性装配 application.properties中添加 tomcat.host=19 ...

  7. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_06 Properties集合_1_使用Properties集合存储数据,遍历取出集合中的数据

    map下面的实现类叫做Hashtable Properties是唯一和IO流相结合的 讲解 代码

  8. 前端 CSS的选择器 伪类选择器

    伪类选择器 常用的几种伪类选择器. 伪类选择器一般会用在超链接a标签中 没有访问的超链接a标签样式: a:link { color: blue; } <!DOCTYPE html> < ...

  9. [Git] 002 初识 Git 与 GitHub 之加入文件 第一弹

    在 GitHub 的 UI 界面使用 Git 往仓库里加文件 第一弹 1. 点击右上方的 Create new file 2. 在左上方填入文件名,若有后缀,记得加上 3. 页面跳转,此时已有两个文件 ...

  10. [Python3] 014 集合的内置方法

    目录 1. Python3 中如何查看 set() 的内置方法 2. 少废话,上例子 (1) add() (2) 又见清理大师 clear() (3) 又见拷贝君 copy() (4) 找茬君 dif ...