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 ...
随机推荐
- 【a802】最少转弯问题
Time Limit: 10 second Memory Limit: 2 MB 问题描述 给出一张地图,这张地图被分为n*m(n,m<=100)个方块,任何一个方块不是平地就是高山.平地可以通 ...
- （翻译）2016美国数学建模MCM E题(环境)翻译:我们朝向一个干旱的星球？
PROBLEM E: Are we heading towards a thirsty planet? Will the world run out of clean water? According ...
- DotNetty编写跨平台网络通信
DotNetty编写跨平台网络通信 长久以来,.Net开发人员都非常羡慕Java有Netty这样,高效,稳定又易用的网络通信基础框架.终于微软的Azure团队,使用C#实现的Netty的版本发布.不但 ...
- 学习鸟哥的Linux私房菜笔记（9）——bash1
一.Shell简介 Shell :命令行解释器,是用户与系统沟通时的媒介 在Unix系统中有各种Shell, Linux采用bash为其默认shell 系统可以使用的shell记录在 /etc/she ...
- 如何更好的利用redis
原文地址http://oldblog.antirez.com/post/take-advantage-of-redis-adding-it-to-your-stack.html @(syoka)[re ...
- 概率图模型（PGM） —— 贝叶斯网络（Bayesian Network）
概率图模型是图论与概率方法的结合产物.Probabilistic graphical models are a joint probability distribution defined over ...
- 在webapi中使用swagger
1 在webapi项目下安装swagger,包名 Swashbuckle.AspNetCore 2 在webapi的startup.cs文件中添加swagger服务 /// <summary&g ...
- 在wpf datagrid中，想要根据一个条件来改变datagrid行的背景颜色
原文:在wpf datagrid中,想要根据一个条件来改变datagrid行的背景颜色 在wpf datagrid中,想要根据一个条件来改变datagrid行的背景颜色 例如根据学生的年龄来修改,年龄 ...
- 微信小程序之加载更多（分页加载）实例
业务需求: 列表滚动到底部时,继续往上拉,加载更多内容 必备参数: (1)pageindex: 1 //第几次加载 (2)callbackcount: 15 //需要返回数据的个数 其他参数: 根据接 ...
- Android - 小的特点 - 使用最新版本ShareSDK手册分享（分享自己定义的接口）
前太实用Share SDK很快分享,但官员demo快捷共享接口已被设置死,该公司的产品还设计了自己的份额接口,这需要我手动共享. 读了一堆公文,最终写出来,行,废话,进入主题. 之前没实用过Share ...