CSS（八）三栏布局详解

最新推荐文章于 2024-03-06 14:42:16 发布

fullstack_lth

最新推荐文章于 2024-03-06 14:42:16 发布

阅读量330

点赞数 1

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/u014744118/article/details/105019905

版权

CSS 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了CSS中实现三栏布局的七种方法，包括流体布局、BFC布局、双飞翼布局、圣杯布局、Flex布局、Table布局和绝对定位布局。每种布局都有其特点，如流体布局和BFC布局可能导致主要内容加载延迟，而Flex布局是未来趋势但需关注浏览器兼容性。选择布局时需根据实际需求和兼容性考虑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三栏布局，顾名思义就是两边固定，中间自适应。

以下一些为公共代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
	.left {
	     
	}
	.right {
	     
	}
	.main {
    
	}
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>
</html>

下面七种技巧各有千秋，在开发中可以根据实际需求选择适合自己的方法进行编码。

1. 流体布局

.left {
  float: left;
  height: 200px;
  width: 100px;
  background-color: yellowgreen;
}

.right {
  width: 200px;
  height: 200px;
  background-color: darkorange;
  float: right;
}

.main {
  margin-left: 120px;
  margin-right: 220px;
  height: 200px;
  background-color: cyan;
}

左右模块各自向左右浮动，并设置中间模块的 margin 值使中间模块宽度自适应。

缺点就是主要内容无法最先加载，当页面内容较多时会影响用户体验。

2. BFC 三栏布局

BFC 规则有这样的描述：BFC 区域，不会与浮动元素重叠。可以利用这一点来实现 3 列布局。

.left {
  float: left;
  height: 200px;
  width: 100px;
  margin-right: 20px;
  background-color: yellowgreen;
}
.right {
  width: 200px;
  height: 200px;
  float: right;
  margin-left: 20px;
  background-color: darkorange;
}
.main {
  height: 200px;
  overflow: hidden;
  background-color: cyan;
}

缺点跟方法一类似，主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。因此为了解决这个问题，有了下面要介绍的布局方案双飞翼布局。

3. 双飞翼布局

这个布局的html和前面稍有不同

<body>
    <div class="content">
        <div class="main"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>

.content {
  float: left;
  width: 100%;
}
.main {
  height: 200px;
  margin-left: 110px;
  margin-right: 220px;
  background-color: yellowgreen;
}
.left {
  float: left;
  height: 200px;
  width: 100px;
  margin-left: -100%;
  background-color: cyan;
}
.right {
  width: 200px;
  height: 200px;
  float: right;
  margin-left: -200px;
  background-color: darkorange;
}

利用的是浮动元素 margin 负值的应用，感兴趣的同学可以上网搜搜原理。

主体内容可以优先加载，HTML 代码结构稍微复杂点。

4. 圣杯布局

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

.container {
  margin-left: 120px;
  margin-right: 220px;
}
.main {
  float: left;
  width: 100%;
  height: 300px;
  background-color: cyan;
}
.left {
  float: left;
  width: 100px;
  height: 300px;
  margin-left: -100%;
  position: relative;
  left: -120px;
  background-color: darkorange;
}
.right {
  float: left;
  width: 200px;
  height: 300px;
  margin-left: -200px;
  position: relative;
  right: -220px;
  background-color: yellowgreen;
}

跟双飞翼布局很像，有一些细节上的区别，相对于双飞翼布局来说，HTML 结构相对简单，但是样式定义就稍微复杂，也是优先加载内容主体。

5. Flex 布局

.container {
  display: flex;
}
.main {
  flex-grow: 1;
  height: 300px;
  background-color: cyan;
}
.left {
  order: -1;
  flex: 0 1 200px; 
  margin-right: 20px;
  height: 300px;
  background-color: darkorange;
}
.right {
  flex: 0 1 100px;
  margin-left: 20px;
  height: 300px;
  background-color: yellowgreen;
}

简单实用，未来的趋势，需要考虑浏览器的兼容性。

6. Table 布局

.container {
  display: table;
  width: 100%;
}
.left, .main, .right {
  display: table-cell;
}
.left {
  width: 200px;
  height: 300px;
  background-color: darkorange;
}
.main {
  background-color: cyan;
}
.right {
  width: 100px;
  height: 300px;
  background-color: yellowgreen;
}

缺点：无法设置栏间距

7. 绝对定位布局

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

.container {
  position: relative;
}
.main {
  height: 400px;
  margin: 0 120px;
  background-color: yellowgreen;
}
.left {
  position: absolute;
  width: 100px;
  height: 300px;
  left: 0;
  top: 0;
  background-color: cyan;
}
.right {
  position: absolute;
  width: 100px;
  height: 300px;
  background-color: darkorange;
  right: 0;
  top: 0;
}