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 ...
随机推荐
- 混合使用C++语言和Objective-C语言
如果你的源文件扩展名是.m的,你还需要改成.mm,这样编译器才知道你将会在该文件中混合使用C++语言和Objective-C语言.
- iOS CALayer使用
CALayer使用 iOS的设备中,我们之所以能看到各种各样的控件.文字.图片,都是Core Animation框架的功劳.它通过图层的合成,最终显示在屏幕上.而今天这篇文章讲的就是Core Anim ...
- RStudio 的使用
0. 基本 路径查看和设置: getwd() ⇒ 查看路径 setwd() ⇒ 设置路径: 1. 快捷键 ctrl+shift+c:多行注释:选中待注释的代码段,按下 ctrl+shift+c(c 表 ...
- Android中间httpclient发送帧get求
/** * 採用httpclientGet请求的方式 * * @param username * @param password * @return null表示求得的路径有问题,text返回请求得到 ...
- vue sourcemap详解
从webpack开始 直接进入正题.有人觉得vue项目难调试,是因为用了webpack.所有代码揉在了一起,还加了很多框架代码,根本不知道怎么下手.所以vue+webpack调试要从webpack入手 ...
- Unity3d报告奇怪的错误CompareBaseObjectsInternal can only be called from the main thread.
其中使用了该项目.NET的Async Socket代码.后来不知道什么时候这个奇怪的错误的出现: CompareBaseObjectsInternal can only be called from ...
- window7使用MinGW在命令行编译C/C++源程序（从零开始，设置PATH，LIBRARY_PATH，C_INCLUDE_PATH）
1.要想在window命令行下面编译C/C++源程序,对于初学者来说,需要在window环境下面配置好GCC和G++编译器,我使用的是MinGW,下载地址为:http://sourceforge.ne ...
- ASP.NET Core 使用 EF 框架查询数据 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core 使用 EF 框架查询数据 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 使用 EF 框架查询数据 上一章节我们学习了如何设置 ...
- 关于VS2015中的code snippet无法使用的问题
什么是code snippet? Code snippets are small blocks of reusable code that can be inserted in a code file ...
- 使用FileStream向txt格式的文本文件 "追加" 新内容并读取
原文:使用FileStream向txt格式的文本文件 "追加" 新内容并读取 //得到文件路径. static string filePath = AppDomain.Curren ...