您现在的位置是:首页 > 正文

页面布局——三栏布局、圣杯和双飞翼布局

2024-04-01 05:59:29阅读 3

圣杯布局来自于文章In Search of the Holy Grail,双飞翼布局源于淘宝的UED。

圣杯和双飞翼布局是同一种布局的不同实现方式,实现的都是三栏布局、两边盒子宽度固定、中间盒子自适应(固比固布局),且中间盒子优先渲染,任何一列都可以最高。

解决方案大体相同,都是三栏全部float:left浮动,区别在于解决中间栏div的内容不被遮挡上,圣杯布局是中间栏在添加相对定位,并配合left和right属性,效果上表现为三栏是单独分开的(如果可以看到空隙的话),而双飞翼布局是在中间栏的div中嵌套一个div,内容写在嵌套的div里,然后对嵌套的div设置margin-left和margin-right,效果上表现为左右两栏在中间栏的上面,中间栏还是100%宽度,只不过中间栏的内容通过margin的值显示在中间。

    

假设左侧盒子固定宽度为200px,右侧盒子固定宽度为150px,中、左、右列分别简写为CC、LC和RC。

一、Holy Grail layout

仅需要一个额外的div,非常简单的CSS,最小的hack,适用于所有现代浏览器和IE6。

<div id="header"></div>
<div id="container">
    <div id="center" class="column"></div>
    <div id="left" class="column"></div>
    <div id="right" class="column"></div>
</div>
<div id="footer"></div>

(1)设置padding-left和padding-right分别为左右侧盒子的宽度;
(2)设置中、左、右盒子的宽度及float,footer清除浮动;
(3)放置左盒子:margin-left:-100%;使左盒子与中盒子左侧重合,使用相对定位使左盒子左移(?仅设置左盒子position:relative;);
(4)放置右盒子:margin-right:-150px;;
(5)如果中盒子小于左盒子,布局会被破坏(IE6不会发生该问题),可设置最小宽度;
(6)对于IE6,margin-left:-100%;将左盒子拉得太远(整个浏览器窗口的宽度),需借助left定位。

body {
  min-width: 550px;      /* 2x LC width + RC width */
}
#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
}
#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}
#footer {
  clear: both;
}
/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}

如果每一列之间需要设置padding,

二、双飞翼布局

给中间盒子增加额外的div

里层main-content的作用就是将main定位到合适的位置,并方便设置padding等属性。

<div id="header"></div>
<div id="center" class="column">
    <div id="inside"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>
body {
  min-width: 550px;      /* 2x LC width + RC width */
}
.column {
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          /* LC width */
  margin-left: -100%;
}
#right {
  width: 150px;          /* RC width */
  margin-left: -150px; /* RC width */
}
#footer {
  clear: both;
}
/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}

网站文章

  • php构造函数返回,php:构造函数可以返回值吗?

    php:构造函数可以返回值吗?class a{function construct(){return 'abc';}}可以吗?貌似是不行的吧、、、忘记了,没怎么主意这个你可以这么写,但new后得到的仍...

    2024-04-01 05:59:00
  • Windows常见的数据缓存介绍及清除办法

    Windows常见的数据缓存介绍及清除办法

    然而,随着时间的推移,这些缓存可能会占用大量的磁盘空间,影响系统的运行速度。本文将介绍Windows常见的数据缓存类型,并提供清除缓存的方法。请注意,在执行任何清除操作之前,建议您备份重要的数据,并确...

    2024-04-01 05:58:54
  • 神级编辑器统一表格与Python,向Excel说再见!

    神级编辑器统一表格与Python,向Excel说再见!

    很多开发者说自从有了 Python/Pandas,Excel 都不怎么用了,用它来处理与可视化表格非常快速。但是这样还是有一大缺陷,操作不是可视化的表格,因此对技能要求更高一点。近日,开发者构建了名为...

    2024-04-01 05:58:46
  • STL之vector模拟实现

    vector的中文意思是向量,他可以容纳很多类型的数据,因此vector也被称为容器。看到前面的解释可能你一脸蒙逼,下面我给出两种简单的理解。可以把vector理解为是一个可以动态增长的数组,一个数组...

    2024-04-01 05:58:10
  • node.js连接MongoDB数据库,db.collection is not a function完美解决

    node.js连接MongoDB数据库,db.collection is not a function完美解决

    解决方法一、 mongodb数据库版本回退: 这个错误是出在mongodb的库中,在nodejs里的写法和命令行中的写法不一样,3.0的api已经更新和以前的版本不不一样,我们在npm中没指定版本号的安装就默认安装的是3.0版本。 可以参考3.0的api文档:http://mongodb.github.io/node-mongodb-native/3.0/api/ 在项目中找到packag...

    2024-04-01 05:58:02
  • JS中第三方库

    网站:https://www.bootcdn.cn库:moment.js 日期处理类的库(体积较大) day.js处理日期的(体积较小)

    2024-04-01 05:57:18
  • 【java学习】进程、线程、程序

    【java学习】进程、线程、程序

    1,概念 (1)分类 ①守护线程(Daemon Thread) 用户线程可以通过System.exit(status)(status为0时表示正常退出,非0表示非正常退出)来退出JVM。 父线程是守护线程子线程默认为守护线程,父线程是用户线程子线程默认为用户线程。父线程在创建子线程后,启动子线程之前,可以调用Thread实例的setDaemon方法来修改线程属性。 当没有用户线程...

    2024-04-01 05:57:12
  • php程序怎么导入数据库,php 简单数据库导入程序[.sql文件]

    php 简单数据库导入程序[.sql文件]function insert_file($file,$replace=&#39;&#39;){global $Charset;$readfiles=read...

    2024-04-01 05:57:03
  • python子进程模块subprocess详解与应用实例 之二

    1.2. Popen 对象 Popen类的实例有下列方法: 1. Popen.poll() 检查子进程是否已经结束,设置并返回返回码值。 2. Popen.wait() 等待子进程结束,设置并返回返回码值。 WARNING: 当使用 stdout=PIPE 或 stderr=PIPE 并且子进程生成了足够多的输出信息到管道,以至于管道阻塞,将会造成死锁。 使用 com

    2024-04-01 05:56:19
  • shell脚本之批量添加用户

    shell脚本之批量添加用户

    1 #/bin/bash 2 for i in {1..10};do 3 if id user$i &amp;&gt; /dev/null;then 4 echo &quot;This user is exists&quot; 5 else 6 adduser user$i &amp;&gt;/...

    2024-04-01 05:56:12