您的位置：首页 > Web前端 > CSS

CSS三栏布局

2018-03-03 22:59 267 查看

原帖 - 个人博客链接

三栏布局在前端开发中特别常见，即两端固定中间自适应。

下面就来介绍一下常用的三栏布局开发方式。

例如：高度固定为200px，两边固定为200px，中间自适应，效果如图：

(1)Float方法

原理：

元素浮动后，脱离文档流。

左右栏分别浮动在窗口两边，中间块(处于文档流中)受左右浮动影响被卡在中间无法继续向左右伸展已达到自适应，最后按需设置中间块的margin值来改变快间间隙即可。

基于纯float实现的三栏布局需要将中间的内容放在HTML结构的最后，DOM结构为

左-右-中

，否则右侧会沉在中间内容的下侧 .

缺点：

由于DOM结构限制

左-右-中

，主要内容无法最先加载

高度中间高度超出且没有margin的情况下会出问题(文字环绕)：解决方案为创建BFC

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.left {
float: left;
height: 200px;
width: 200px;
background-color: red;
}
.right {
width: 200px;
height: 200px;
background-color: blue;
float: right;
}
.main {
margin-left: 220px;
margin-right: 220px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
</html>

(2)绝对定位 position:absolute

原理：

绝对定位的元素脱离文档流，相对于最近的已经定位的祖先元素进行定位。无需考虑HTML中结构的顺序

优点:

方便快捷，主要内容可以优先加载。

缺点：

由于容器脱离了文档流，导致子元素必须脱离文档流

高度未知的情况下会出问题

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.main {
height: 200px;
margin: 0 220px;
background-color: green;
}
.left {
position: absolute;
width: 200px;
height: 200px;
left: 0;
background-color: red;
}
.right {
position: absolute;
width: 200px;
height: 200px;
background-color: blue;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

(3)Flex布局

在讲flex布局之前我们想要了解一下flex布局的一些重要参数

(1)

flex-grow

:属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

.item {
flex-grow: <number>; /* default 0 */
}

如果所有项目的

flex-grow

属性都为1，则它们将等分剩余空间（如果有的话）。
10fe1
如果一个项目的

flex-grow

属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

(2)

flex-shrink

:属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
flex-shrink: <number>; /* default 1 */
}

如果所有项目的

flex-shrink

属性都为1，当空间不足时，都将等比例缩小(比例可通过属性数值调节)。

如果一个项目的

flex-shrink

属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

(3)

flex-basis

:属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为

auto

，即项目的本来大小。

.item {
flex-basis: <length> | auto; /* default auto */
}

它可以设为跟

width

或

height

属性一样的值（比如350px），则项目将占据

固定空间

。

(4)

flex

:flex属性是

flex-grow

flex-shrink

和

flex-basis

的简写，默认值为

0 1 auto

。后两个属性可选。

.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：

auto (1 1 auto)

和

none (0 0 auto)

。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

flex实现三栏布局代码：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: flex;
}
.main {
flex: 1;
margin: 0 20px;
height: 200px;
background-color: green;
}
.left {
width: 200px;
height: 200px;
background-color: red;
}
.right {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>

<body>
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
</html>

(4)Table布局

优点：

兼容性很好

缺点：

无法设置栏边距，左中右模块间无间隔

对SEO不够友好

当一个格高度增加，其余的格也会被动增加高度

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: table;
width: 100%;
}
.left, .main, .right {
display: table-cell;
}
.left {
width: 200px;
height: 200px;
background-color: red;
}
.main {
background-color: green;
}
.right {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
</html>

(5)grid布局

优点：

简单方便

缺点：

兼容性不强。高度未知的情况下会出问题。

<html lang="en">
<head>
<style>
.container {
display: grid;
width: 100%;
grid-template-rows: 200px;
grid-template-columns: 200px auto 200px;
}
.left {
background-color: red;
}
.main {
margin: 0 20px;
background-color: green;
}
.right {
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
</html>

(6)圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
margin-left: 220px;       /* 为左右栏腾出空间 */
margin-right: 220px;
}
.main {
float: left;
width: 100%;
height: 200px;
background-color: green;
}
.left {
float: left;
width: 200px;
height: 200px;
margin-left: -100%;
position: relative;
left: -220px;
background-color: red;
}
.right {
float: left;
width: 200px;
height: 200px;
margin-left: -200px;
position: relative;
right: -220px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

(0)DOM结构为

中-左-右

。

.container

设置

margin-left

和

margin-right

为左右栏腾出空间。

(1)中间部分需要根据浏览器宽度自适应，所以要用

width:100%

，这里设三栏均向左浮动，因为中间100%，左层和右层没有位置上去

(2)将左栏设置为

margin-left:-100%

后，发现left上去了。这是因为左栏已经在最左边了，向左移动时，由于左侧没空间了，只能往上挪。而向左挪100%就相当于移动了一个main的距离，相当于向上移。

(3)按第二步的方法，将右栏向左移动一个身位(即

margin:-200px

)，这时右栏来到了上方的最右边。

(4)但由于左右栏遮挡住了中间部分，于是采用相对定位方法，各自相对于自己把自己挪出去，得到最终结果。

(7)双飞翼布局

圣杯布局实际看起来是复杂的后期维护性也不是很高，在淘宝UED的探讨下，出来了一种新的布局方式就是双飞翼布局，增加多一个div就可以不用相对布局了，只用到了浮动和负边距。和圣杯布局差异的地方已经被注释。

优点：

结构简单，易维护

缺点：

三栏之间难以插入空挡

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
/* margin-left: 220px;
margin-right: 220px; */
}
.main {
float: left;
width: 100%;
height: 200px;
background-color: green;
}
.left {
float: left;
width: 200px;
height: 200px;
margin-left: -100%;
/*  position: relative;
left: -220px;         */
background-color: red;
}
.right {
float: left;
width: 200px;
height: 200px;
margin-left: -200px;
/*  position: relative;
right: -220px;         */
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<div class="inner"></div>    <!-- 新增inner -->
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航