两/三栏布局（圣杯双飞翼）

最新推荐文章于 2022-09-01 20:14:06 发布

老街一角

最新推荐文章于 2022-09-01 20:14:06 发布

阅读量141

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/Wen_Tao98/article/details/112793568

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

常见页面布局

一、两栏布局，左边定宽，右边自适应
左边左浮动，右边加overflow:hidden;变成BFC清除左侧浮动元素的影响

 #left{
    float: left;
    width: 200px;
    background: green;
}
#right{
    overflow: hidden;
    background: red;
}

二、三栏布局，圣杯布局，双飞翼布局

DOM结构

<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>

首先定义出整个布局的DOM结构，主体部分是由conatiner包裹的center,left,right三列，其中center定义在最前面。

CSS代码
（1）假设左侧的固定宽度为200px,y右侧的固定宽度为150px,则首先在container上设置：
```
#container {
  padding-left: 200px; 
  padding-right: 150px;
}
```
（2）随后分别为三列设置宽度与浮动，同时对footer设置清除浮动：
```
#container .column {
  float: left;
}

#center {
  width: 100%;
}

#left {
  width: 200px; 
}

#right {
  width: 150px; 
}

#footer {
  clear: both;
}
```
（3）根据浮动的特性，由于center的宽度为100%，即占据了第一行的所有空间，所以left和right背挤到了下一行，接下来的工作是将left放置到之前预留出的位置上，这里使用负外边距：
```
#left {
  width: 200px; 
  margin-left: -100%;
}
```
（4）随后使用定位方法
```
#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
}
```
这里使用position:relative和right:200px将left的位置在原有的位置上左移200px,以完成left的放置

（5）接下来放置right,只需要添加一条声明即可
```
#right {
  width: 150px; 
  margin-right: -150px; 
}
```
（6）最后可以设置一下页面的最小宽度
```
body {
  min-width: 550px;
}
```
（7）要想保证该布局效果正常显示，由于两侧都具有固定的宽度，所以需要给定页面一个最小的宽度，但这并不只是简单的200+150=350px。回想之前left使用了position: relative，所以就意味着在center开始的区域，还存在着一个left的宽度。所以页面的最小宽度应该设置为200+150+200=550px

圣杯的css代码总结为：
```
body {
  min-width: 550px;
}

#container {
  padding-left: 200px; 
  padding-right: 150px;
}

#container .column {
  float: left;
}

#center {
  width: 100%;
}

#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
}

#right {
  width: 150px; 
  margin-right: -150px; 
}

#footer {
  clear: both;
}
```

三、双飞翼布局

（1）DOM结构

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

双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上。

（2）css代码

按照与圣杯布局相同的思路，首先设置各列的宽度与浮动，并且为左右两列预留出空间，以及为footer设置浮动清除

#container {
  width: 100%;
}

.column {
  float: left;
}

#center {
  margin-left: 200px;
  margin-right: 150px;
}

#left {
  width: 200px; 
}

#right {
  width: 150px; 
}

#footer {
  clear: both;
}

以上代码将container,left,right设置为float: left，而在container内部，center由于没有设置浮动，所以其宽度默认为container的100%宽度，通过对其设置margin-left和margin-right为左右两列预留出了空间。

（3）将left放置到预留位置：

#left {
  width: 200px; 
  margin-left: -100%;
}

（4）将right放置到预留位置：

#right {
  width: 150px; 
  margin-left: -150px;
}

（5）最后计算最小页面宽度：由于双飞翼布局没有用到position:relative进行定位，所以最小页面宽度应该为200+150=350px。但是当页面宽度缩小到350px附近时，会挤占中间栏的宽度，使得其内容被右侧栏覆盖
（6）因此在设置最小页面宽度时，应该适当增加一些宽度以供中间栏使用（假设为150px），则有

body {
  min-width: 500px;
}

双飞翼整体css代码

body {
  min-width: 500px;
}

#container {
  width: 100%;
}

.column {
  float: left;
}
        
#center {
  margin-left: 200px;
  margin-right: 150px;
}
        
#left {
  width: 200px; 
  margin-left: -100%;
}
        
#right {
  width: 150px; 
  margin-left: -150px;
}
        
#footer {
  clear: both;
}

总计与思考
通过对圣杯布局和双飞翼布局的介绍可以看出，圣杯布局在DOM结构上显得更加直观和自然，且在日常开发过程中，更容易形成这样的DOM结构（通常<aside>和<article>/<section>一起被嵌套在<main>中）；而双飞翼布局在实现上由于不需要使用定位，所以更加简洁，且允许的页面最小宽度通常比圣杯布局更小。