css自适应布局之“圣杯双飞翼”
首先，这个这么扯淡又装逼的名字不知道是谁起的，大意就是说：中间的内容随着浏览器宽度的不同，进行宽度自适应操作，而两边的内容固定宽度。
来，上个代码演示一下：
<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自适应布局之“圣杯双飞翼”的更多相关文章
- 这可能是史上最全的CSS自适应布局总结教程
标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...
- 【CSS】 布局之圣杯布局
在看众多大神的css布局指南时,经常看到一个布局:圣杯布局(也有称为双飞翼布局的).今天我们也来剖析一下. 其实,对于众多css布局,我们只要明确理解了3种技术,那么基本上大多数布局都难不倒我们了: ...
- DIV+CSS自适应布局
自适应布局分两类:高度和宽度,方法有很多,我用三列布局举例,我就列几个通俗易懂的例子呗,懂了三列的,两列的原理一样,呵呵哒. 效果图如下:高度自适应——宽度自适应 1,高度自适应 ...
- [css] 自适应布局 移动端自适应
一.宽度自适应 三列布局左右固定.中间不固定或者两列布局,左边固定右边不固定 原文链接:http://www.cnblogs.com/2050/archive/2012/07/30/2614852.h ...
- css 自适应布局阮一峰
转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...
- css 自适应布局
转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...
- 记一次产品需求：图片等比缩放和CSS自适应布局16:9
前言 前阵子,产品跑过来问我现有的模板中没有图片模板,需要添加一个图片模板:然而,他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放,并且居中展示图片.我当时想着,抛开技术实现层面, ...
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...
- CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)
1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime ...
随机推荐
- [C#.net]SqlDataAdapter 执行超时已过期 完成操作之前已超时或服务器未响应
随着数据库数据的不断增大,查询时间也随之增长.而客户端与数据库连接时间以及命令的执行时间都是有限的.默认为30s.所以在查询数据的时候,程序会出现 “超时时间已到.在操作完成之前超时时间已过或服务器未 ...
- 《Linux就该这么学》第十七天课程
想学Squid可以前往https://www.linuxprobe.com/chapter-16.html讲的非常细 Squid服务程序提供正向代理服务 Squid服务程序提供的反向代理模式
- qt字符数组转ASCII（十六进制）
接收网络传输数据 QByteArray array;//显示字符串 QString str = QString::fromLocal8Bit(array); m_receiveTxt.append( ...
- java 调用 api接口
/* * Copyright 2018 textile.com All right reserved. This software is the * confidential and propriet ...
- Python3--Numpy
数组的形状是它有多少行和列,上面的数组有5行和5列,所以它的形状是(5,5). itemsize属性是每个项占用的字节数.这个数组的数据类型是int 64,一个int 64中有64位,一个字节中有8位 ...
- Exp4 恶意代码分析 20154320 李超
恶意代码 概述 恶意代码是指故意编制或设置的.对网络或系统会产生威胁或潜在威胁的计算机代码.最常见的恶意代码有计算机病毒(简称病毒).特洛伊木马(简称木马).计算机蠕虫(简称蠕虫).后门.逻辑炸弹等. ...
- ubuntu+apache2设置访问、重定向到https
环境:ubunt14裸机,apache2,php5 条件:证书(部分商家买域名送一年),域名,为了方便均在root用户下进行的 web目录:/var/www/test 证书目录(自建):/etc/ap ...
- IDEA的Database表的基本操作
1.创建表 方法一:直接创建:右键-new-table 方法2: 参考别的表,直接用语句,右键-DDL and Sources- 然后直接在控制台修改 修改后直接运行,表就建好了 2.备份表 先用上面 ...
- Linux下安装GEOS环境
1.下载对应版本的geos源码:http://download.osgeo.org/geos/ 2.下载后使用cd切换到源码目录解压:tar -xvf geosXXX.tar.gz 3.切换到解压后目 ...
- PMS权限管理和鉴权过程
一.权限的管理基础知识 1．系统的权限机制分为:权限解析.权限分配.鉴权.动态添加权限 2．PermissionInfo : PackageParser.Permission中包含一个对应的Perm ...