CSS 圣杯布局双飞翼布局

来源：互联网发布：诸葛网络和饼哥编辑：程序博客网时间：2024/05/01 03:24

两种其实是一样的布局。特点：中间的内容可以根据屏幕的大小的改变而改变,左右两边的内容保持不变

代码编写的时候：两者的区别在于：圣杯布局是一个父类里面有(简单没有复合)三个子类，并设置父类的margin值，在一行显示用浮动，之后再通过定位的方式去移动盒子从而达到我们想要的效果。双飞翼布局是一个父类里面有三个子类，并且中间的middle变化的是在这个三个子类中一个类里面作为其子类，说白了，就是又嵌套了一层，之后通过浮动从而达到我们想要的效果，没有涉及定位。

圣杯布局（了解）

目的：加载文档时先加载中间区域，再加载左右两边。

特点：中间的内容可以根据屏幕的大小的改变而改变,左右两边的内容保持不变。

实现：

1.0在一个大的div中放入三个小的div，并且排序一定要是中间的div放在文档的最前面。

2.0给大的div设置左右padding,给中间的div设置宽度为100%;

3.0设置左右两边div的大小，注意为了让所有的div显示在同一行中，三个div都必须浮动（float:left）.

4.0给左边的div设置margin-left:-100%;给右边的div设置margin-left:值。这个值为这个盒子宽高。

5.0如果按照述的方式来移动盒子，中间的内容会被左右的盒子覆盖住。我们还需要使用定位来将盒子定位左右两。给第左边的盒子设置postion:relative，再设置left:-盒子的宽度。给右边的盒子也设置postion:relative，再设置这个盒子right:-盒子的宽度。

用到了哪些技术

浮动

margin-left

定位

<head> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } .content { height: 150px; background-color: red; padding: 0 200px; min-width: 400px; } .middle { width: 100%; height: 150px; background-color: blue; float: left; } .left { width: 200px; height: 150px; background-color: yellow; float: left; margin-left: -100%; position: relative; left: -200px; } .right { width: 200px; height: 150px; background-color: yellow; float: right; margin-left: -100%; position: relative; right: -200px; } </style> </head> <body> <div class="content"> <div class="middle"></div> <div class="left"></div> <div class="right"></div> </div> </body> </html>

双飞翼布局（了解）

圣杯布局和双飞翼布局解决的问题是一样的，但是实现的过程是不同的。

目的：加载文档时先加载中间区域，再加载左右两边

特点：中间的内容可以根据屏幕的大小的改变而改变,左右两边的内容保持不变。

用到的技术：

浮动

margin-left

<html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> * { margin: 0; padding: 0; } .content { height: 150px; background-color: red; } .f { width: 100%; height: 150px; background-color: blue; float: left; } .middle { height: 150px; margin: 0 200px; background-color: pink; } .left { width: 200px; height: 150px; background-color: yellow; float: left; margin-left: -100%; } .right { width: 200px; height: 150px; background: yellow; float: right; margin-left: -100%; } </style> </head> <body> <div class="content"> <div class="f"> <div class="middle"></div> </div> <div class="left"></div> <div class="right"></div> </div> </body> </html>

阅读全文

0 0

CSS 圣杯布局 双飞翼布局

圣杯布局（了解）

CSS 圣杯布局双飞翼布局