css的圣杯布局
圣杯布局和双飞翼布局实现的效果是一样的。
代码解析：
1.四个section，container，main,left,right。其中那个container为父容器。
2.main,left,right均左浮动。
3.main的宽度为100%。
4.设置left的margin:-100%。
5.设置rightd margin:-200px;
6.设置父容器的内边距padding:0px 200px 0px 200px。
7.设置left的positon:relative;left:-200px.
8.设置right的position:relative:right;right:-200px;
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
min-width: 700px;
} #container {
padding: 0px 200px 0px 200px;
} #main {
height: 200px;
width: 100%;
float: left;
background-color: rebeccapurple;
word-break: break-all;
} #left {
height: 200px;
width: 200px;
float: left;
background-color: gold;
margin-left: -100%;
position: relative;
left: -200px;
} #right {
height: 200px;
width: 200px;
float: left;
background-color: firebrick;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
</head> <body>
<section id="container">
<section id="main">
gfdgdfg gdfgfdg gfdgdfg gdfgfdggfdgdfg gdfgfdggfdgdfg gdfgfdg
</section>
<section id="left"></section>
<section id="right"></section>
</section>
</body> </html>
css的圣杯布局的更多相关文章
- CSS之圣杯布局与双飞翼布局
圣杯布局 三行等高 HTML: <!DOCTYPE html><html><head> <meta charset="utf-8"& ...
- 前端css：“圣杯布局”
昨天面试前端,一面危险通过,面试官建议我看看“圣杯布局”,听起来很玄妙的名字,花了一晚上弄明白怎么回事,惊讶于前端工作的细节和技巧! 我先看几个基础,在后面要用到的: 1.CSS right/left ...
- CSS 之 圣杯布局&双飞翼布局
圣杯布局 和 双飞翼布局 是重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局. 遵循了以下要点: 两侧宽度固定,中间宽度自适应 中间部分在DOM结构上优先,以便先行 ...
- CSS 圣杯布局 / 双飞翼布局的实现
工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...
- CSS布局 -- 圣杯布局 & 双飞翼布局
按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- CSS经典布局-圣杯布局、双飞翼布局
圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...
- CSS布局方案之圣杯布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- CSS 圣杯布局升级版---多个固定宽度一个自适应宽度
1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...
随机推荐
- Docker for Linux 安装
原文:Docker for Linux 安装 前言: 环境:centos7.5 64 位 正文: Docker 软件包已经包括在默认的 CentOS-Extras 软件源里.因此想要安装 docker ...
- TDM-GCC是从mingw-w64项目patch而来，全部使用静态链接，对线程不需要额外的DLL，默认使用SJLJ异常（真是好东西）
Windows版GCC之TDM-GCC 4.5.2 平时写 C/C++ 小程序的时候,不喜欢开VS,太庞大了,还要建项目.对于小程序,一个可以进行单文件编译的 IDE 是我的首选,我用的是 C-Fre ...
- PL/SQL Developer跑在Oracle 64位数据库上初始化错误
安装完Oracle(64位).PL/SQL Developer后执行PL/SQL出现例如以下的错误: 网上查资料说,我的PL/SQL Developer与ORACLE不兼容,即PL/SQL不支持64位 ...
- 解决mysql连接异常—-com.mysql.jdbc.CommunicationsException: Communications link failure due to underlying exception
DBCP连接池连接MySql数据库时,一奇葩数据库设置为30秒内无请求自动断开.超时后链接无法关闭,活动链接数飞奔,最后挂掉. 网上找了一圈,一般是这三种,方法一pass,方法二测试无效可能设置错了吧 ...
- VC++实现Vista和Win7系统低权限程序向高权限程序发消息
Windows 7已经隆重发布,但是很多程序员已经通过RTM等版本尝到了Windows 7的甜处.那么在Windows 7下用户界面特权隔离,将是本文我们介绍的重点. 我们介绍了操作系统服务的Sess ...
- 《冰球撞击》Android休闲桌球类游戏现已面试，快来下载吧！
<冰球撞击>Android休闲桌球类游戏现已完工上市快来下载吧! http://pan.baidu.com/s/1dD9vIRv <冰球撞击>是一个类似玩投篮机操作方式的And ...
- LeetCode总结 -- 树结构的一部分
这篇总结主要介绍树中比較常见的一类题型--树的构造.事实上本质还是用递归的手法来实现,可是这类题目有一个特点.就是它是构建一棵树.而不是给定一棵树,然后进行遍历,所以实现起来思路上有点逆向,还是要练习 ...
- Android--常用框架大全
1. 缓存 名称 描述 DiskLruCache Java实现基于LRU的磁盘缓存 2.图片加载 名称 描述 Android Universal Image Loader 一个强大的加载,缓存,展示图 ...
- Xcode 4.5( iOS6 SDK)、旧版本号cocos2d，支持iPhone5解析度
支持iPhone5全屏 1假设没有支持iPhone5是否.直接运行程序可以准备提交.开放iPhone5模拟器,你会发现上面有黑色的程序.没有矩形. 2真正运行该程序时,.你会发现程序回程屏幕高度.它是 ...
- MySQL SYS CPU高的案例分析（二）
原文:MySQL SYS CPU高的案例分析(二) 后面又做了补充测试,增加了每秒context switch的监控,以及SQL执行时各步骤消耗时间的监控. [测试现象一] 启用1000个并发线程的压 ...