三栏布局的页面可分为左中右三部分,然后对中间那部分做自适应的一种布局方式。三栏布局在前端页面的开发中十分常见,那么怎么样的才算是三栏布局呢?比如苏宁易购的首页:

上图的布局就是一个常见的三栏布局:即左边商品导航和右边导航为固定宽度,中间内容随浏览器宽度变化自适应。

下面详细介绍了一些经典及新兴的三栏布局方式,且所有方式显示的效果如下图:

绝对定位布局

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

绝对定位布局是一个比较古老和容易想到的方式,其特点就是简单实用,而且也不容易出问题,缺点就是,容器脱离了文档流,后代元素也脱离了文档流,当高度未知的时候,会有问题,这就导致了这种方法的有效性和可使用性是比较差的。

float布局

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

float布局也是一种较为简单且容易想到的方式,原理是左右模块各自向左右浮动,并设置中间模块的 margin 值使中间模块宽度自适应,缺点就是中间部分最后加载,内容较多时会影响体验。

BFC 三栏布局

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.left {
float: left;
height: 200px;
width: 150px;
margin-right: 10px;
background-color: red;
}
.middle {
height: 200px;
overflow: hidden;
background-color: green;
}
.right {
float: right;
width: 150px;
height: 200px;
margin-left: 10px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
</html>

BFC有一特性:BFC的区域不会与外部浮动元素重叠,这里利用了这一特性,实现了两栏自适应布局。缺点和方法二类似,为了解决这个问题,引出下面要介绍的双飞翼布局。

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.content {
float: left;
width: 100%;
}
.left {
float: left;
height: 200px;
width: 150px;
margin-left: -100%;
background-color: red;
}
.middle {
height: 200px;
margin-left: 160px;
margin-right: 160px;
background-color: green;
}
.right {
width: 150px;
height: 200px;
float: right;
margin-left: -200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="content">
<div class="middle"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>

双飞翼布局是在中间栏的 div 中再嵌套一个 div,内容写在嵌套的 div 里,然后对嵌套的 div 设置 margin-left 和 margin-right,效果上表现为左右两栏在中间栏的上面,中间栏还是 100% 宽度,只不过中间栏的内容通过 margin 的值显示在中间。

中间内容可以优先加载,但其HTML 代码结构稍微复杂点。

圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
margin-left: 160px;
margin-right: 160px;
}
.middle {
float: left;
width: 100%;
height: 200px;
background-color: green;
}
.left {
float: left;
width: 150px;
height: 200px;
margin-left: -100%;
position: relative;
left: -160px;
background-color: red;
}
.right {
float: left;
width: 150px;
height: 200px;
margin-left: -210px;
position: relative;
right: -220px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

圣杯布局的核心是左、中、右三栏都通过float进行浮动,然后通过margin负值进行调整。跟双飞翼布局比较像,但还是有一些区别,相对于双飞翼布局来说,其HTML 结构相对简单,但是css语法就稍微复杂,也是优先加载中间内容。

还有注意一点是:中间内容要放在最上面,保证其先渲染。

Flex布局

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: flex;
}
.middle {
flex-grow: 1;
height: 200px;
background-color: green;
}
.left {
order: -1;
flex: 0 1 150px;
margin-right: 10px;
height: 200px;
background-color: red;
}
.right {
flex: 0 1 150px;
margin-left: 10px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

Flex布局是由CSS3提供的一种较为新兴的、方便的三栏布局方式,简单实用,缺点是其兼容性差一点。

Table 布局

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

算是一种比较老的布局方式,较为简单,但其缺点是:无法设置栏间距,缺乏点灵活性,如下图:

Grid(网格)布局

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-columns: 160px auto 160px;
height: 200px;
}
.left {
background-color: red;
margin-right: 10px;
}
.middle {
background-color: green;
}
.right {
background-color: yellow;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
</html>

网格布局作为一种比较新潮的实现方式,仅仅几条样式命令就能完成三栏布局,可见其布局之强大,但其兼容性比较差。

以上就是我自己总结及结合文档所列出的8种css实现前端三栏布局的方式,如还有其他方式,欢迎大家告诉我哦。



CSS      CSS 布局

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!