css 布局(圣杯、双飞翼)
一、 圣杯布局、
左右固宽,中间自适应
- 三列布局,中间宽度自适应,两边定宽;
- 中间部分要在浏览器中优先展示渲染;
具体步骤:
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 布局(圣杯、双飞翼)的更多相关文章
- CSS布局 -- 圣杯布局 & 双飞翼布局
按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...
- CSS布局-圣杯布局
圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, . ...
- CSS布局 — 圣杯布局与双飞翼布局
圣杯布局 实现原理 html代码中,middle部分首先要放在container的最前部分,然后是left,right 将三者都设置 float:left, position:relative (因为 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- CSS经典布局-圣杯布局、双飞翼布局
圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...
- css布局笔记(三)圣杯布局,双飞翼布局
圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下 <!-- 圣杯布局 --> <!DOCTYPE html> &l ...
- CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...
- CSS 之 圣杯布局&双飞翼布局
圣杯布局 和 双飞翼布局 是重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局. 遵循了以下要点: 两侧宽度固定,中间宽度自适应 中间部分在DOM结构上优先,以便先行 ...
- css两栏布局、圣杯布局、双飞翼布局
最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...
- CSS布局之圣杯布局和双飞翼布局
其实圣杯布局和双飞翼布局实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局.它们实现的效果都是一样的,差别在于其实现的思想. 一.圣杯布局 html代码中,将重要的内容 ...
随机推荐
- 建站手册-浏览器信息:苹果 Safari 浏览器
ylbtech-建站手册-浏览器信息:苹果 Safari 浏览器 1.返回顶部 1. http://www.w3school.com.cn/browsers/browsers_safari.asp 2 ...
- Windows下使用Composer安装yii2
Composer简介 Composer 是PHP中用来管理依赖(dependency)关系的工具.你可以在自己的项目中声明所依赖的外部工具库(libraries),Composer会帮你安装这些依赖的 ...
- 【C#学习笔记】 List.AddRange 方法
[官方笔记] 将指定集合的元素添加到 List 的末尾 命名空间:System.Collections.Generic程序集:mscorlib(在 mscorlib.dll 中) public: vo ...
- RQNOJ PID331 家族
题目描述 若某个家族人员过于庞大,要判断两个是否是亲戚,确实还很不容易,现在给出某个亲戚关系图,求任意给出的两个人是否具有亲戚关系. 规定:x和y是亲戚,y和z是亲戚,那么x和z也是亲戚.如果x,y是 ...
- python基础实现tcp文件传输
准备工作,实现文件上传需要那些工具呢? socket(传输).open()(打开文件).os(读取文件信息),当然还有辅助类sys和json,下面我们开始吧 import socket,sys imp ...
- es6 Promise.reject()方法
es6 Promise.reject()方法:https://blog.csdn.net/ixygj197875/article/details/79188195
- Vue是如何渲染页面的,渲染过程以及原理代码
Vue是如何渲染页面的,渲染过程以及原理代码:https://www.cnblogs.com/ypinchina/p/7238402.html
- 如何通过HTTP API 调取tushare的股票数据
长久以来,Tushare一直以固定的Python SDK方式为大家提供数据服务. 虽然在基于Python的数据分析和Python的量化策略开发很方便,但习惯用其他语言的同学们表示了“抗议”,于是在Tu ...
- 2019 牛客多校第一场 B Integration
题目链接:https://ac.nowcoder.com/acm/contest/881/B 题目大意 给定 n 个不同的正整数 ai,求$\frac{1}{\pi}\int_{0}^{\infty} ...
- hdu3555 Bomb(数位dp)
题目传送门 Bomb Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)Total ...