首先，这个这么扯淡又装逼的名字不知道是谁起的，大意就是说：中间的内容随着浏览器宽度的不同，进行宽度自适应操作，而两边的内容固定宽度。

　　来，上个代码演示一下：

　　

     <style>

             *{

                 margin: 0;

                 padding: 0;

             }

             .wrap {

                 background-color: #FBD570;

                 overflow: hidden;

             }

             .left {

                 float: left;

                 width: 100px;

                 background: #00f;

                 height: 180px;

             }

             .right {

                 float: right;

                 width: 150px;

                 background: #0f0;

                 height: 200px;

             }

             .center {

                 background: #B373DA;

                 height: 150px;

                 margin-left: 100px;

                 margin-right: 150px;

             }

         </style>

     </head>

     <body>

         <div class="wrap">

             <div class="center">center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。</div>

             <div class="left">left，宽度固定，高度可固定也可以由内容撑开</div>

             <div class="right">right，宽度固定，高度可固定也可以由内容撑开</div>

         </div>

     </body>

　　然后出来的效果是这样的：

　　

　　这个大块头的中间部分确实可以随着浏览窗口宽度的改变而改变：

　　

　　但是，卧槽，很猎奇啊有木有？！中间的主体叉在两侧内容上方是什么鬼？我们预期的是让它们在一个水平线上。将代码改为如下这样：

　　

 <style>

             *{

                 margin: 0;

                 padding: 0;

             }

             .wrap {

                 background-color: #FBD570;

                 padding: 0 150px 0 100px;

                 overflow: hidden;

             }

             .left {

                 float: left;

                 width: 100px;

                 background: #00f;

                 height: 180px;

                   margin-left: -100%;

                   position: relative;

                   left:-100px;

             }

             .right {

                 float: right;

                 width: 150px;

                 background: #0f0;

                 height: 200px;

                 margin-left: -150px;

                 position: relative;

                   right:-150px;

             }

             .center {

                 background: #B373DA;

                 height: 150px;

                 float: left;

                 width: 100%;

             }

         </style>

     </head>

     <body>

         <div class="wrap">

             <div class="center">center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。</div>

             <div class="left">left，宽度固定，高度可固定也可以由内容撑开</div>

             <div class="right">right，宽度固定，高度可固定也可以由内容撑开</div>

         </div>

     </body>

　　思路如下：.让左边的盒子上去，需要设置其左边距为负的中间盒子的宽度，也就是.left {margin-left:-100%;}。这样左盒子才可以往最左边移动。而让右边的盒子上去

需要设置其左边距为负的自己的宽度，也就是.right {margin-left：-150px;}。这样右盒子才可以在一行的最右边显示出自己。

　　

　　你是不是以为搞定了？其实并没有，因为中间主体部分的“center，可以”这几个字被挡住了，也就是说新来的这两个所谓“飞翼”把主体的内容挡住了。所以我们还需要把这两个小破翼给挪出去，但是又不能挪到屏幕外边，因为这样我们就看不到了。

　　所以呢，我们做如下操作，利用父级元素设置左右内边距的值，把父级的三个子盒子往中间挤。即.wrap{ padding: 0 150px 0 100px;}。这样就给这两个小破翼腾出了一点空间。

　　

　　最后，把左右两个小破翼分别“抽出来”，即

　　

.left{ position: relative; left: -100px;}

.right{position: relative;right: -150px;}

　　

　　这样，这个什么什么双飞茶杯布局就完成了。

　　最后说一下，这个名字真的太装逼了，有点受不了，不知道是谁想出来的 。

　　

css自适应布局之“圣杯双飞翼”的更多相关文章

  1. 这可能是史上最全的CSS自适应布局总结教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

  2. 【CSS】 布局之圣杯布局

    在看众多大神的css布局指南时,经常看到一个布局:圣杯布局(也有称为双飞翼布局的).今天我们也来剖析一下. 其实,对于众多css布局,我们只要明确理解了3种技术,那么基本上大多数布局都难不倒我们了: ...

  3. DIV+CSS自适应布局

    自适应布局分两类:高度和宽度,方法有很多,我用三列布局举例,我就列几个通俗易懂的例子呗,懂了三列的,两列的原理一样,呵呵哒. 效果图如下:高度自适应——宽度自适应            1,高度自适应 ...

  4. [css] 自适应布局 移动端自适应

    一.宽度自适应 三列布局左右固定.中间不固定或者两列布局,左边固定右边不固定 原文链接:http://www.cnblogs.com/2050/archive/2012/07/30/2614852.h ...

  5. css 自适应布局阮一峰

    转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...

  6. css 自适应布局

    转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...

  7. 记一次产品需求：图片等比缩放和CSS自适应布局16:9

    前言 前阵子,产品跑过来问我现有的模板中没有图片模板,需要添加一个图片模板:然而,他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放,并且居中展示图片.我当时想着,抛开技术实现层面, ...

  8. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

  9. CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)

    1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime ...

随机推荐

  1. H5新特性-canvas绘图--渐变对象路径(最复杂)--图片--变形操作

    今天的目标 3.1:canvas绘图--(重点掌握:渐变对象.路径.图片.变形) 3.2:canvas绘图--渐变对象 线性渐变: linearGradient 径向渐变: var g = ctx.c ...

  2. 学习Acegi应用到实际项目中（11）- 切换用户

    在某些应用场合中,可能需要用到切换用户的功能,从而以另一用户的身份进行相关操作.这一点类似于在Linux系统中,用su命令切换到另一用户进行相关操作. 既然实际应用中有这种场合,那么我们就有必要对其进 ...

  3. python3中报错：TypeError: 'range' object doesn't support item deletion

    1.源代码 以下代码执行时会报  range' object does not support item assignment 的错误,问题出现在第17行的runge(10): import unit ...

  4. spring深入学习(四)-----spring aop

    AOP概述 aop其实就是面向切面编程,举个例子,比如项目中有n个方法是对外提供http服务的,那么如果我需要对这些http服务进行响应时间的监控,按照传统的方式就是每个方法中添加相应的逻辑,但是这些 ...

  5. \usepackage{ulem}带下划线的问题解决

    其实正文应该是斜体字的,但是有可能默认模板会导致斜体变下划线的问题,解决方法如下: \usepackage{ulem} 在 \documentclass[format=acmsmall, review ...

  6. 我的Unity学习笔记之——Unity中从网站下载ab资源+下载存储一条龙

    using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.Net ...

  7. [转]找到MySQL发生swap的原因

    背景: 最近遇到了一个郁闷的问题:明明OS还有大量的空闲内存,可是却发生了SWAP,百思不得其解.先看下SWAP是干嘛的,了解下它的背景知识.在Linux下,SWAP的作用类似Windows系统下的“ ...

  8. Linux系统调用：进程的终止

    之前总结了Linux的系统创建,主要是fork()函数和vfork()函数,最近总结了Linux进程的终止,主要的调用是_exit()和exit(). 先看看两个函数的原型以及各自属于的头文件,可以发 ...

  9. SSM_CRUD新手练习（10）返回分页的JSON数据

    我们完成了员工的分页查询,但是现在这种做法只能适应浏览器和服务器的交互模式,但在移动互联网时代,客户端不仅仅只有浏览器,还有安卓和IOS客户端.我们的解决方式是AJAX+JSON方式来实现平台无关性. ...

  10. linux配置gitlab步骤

    1.安装git命令 yum install -y git 2.查看安装git的版本 git --version 3.创建用于保存项目的文件夹 mkdir 项目文件夹 4.切换目录到项目文件夹 cd 项 ...