本文会分别介绍三种 CSS 实现三栏布局的方法, 可在浏览器中打开查看效果
1. 方法一: 自身浮动的方法
实现方法: 需要左栏向左浮动, 右栏向右浮动, 中间设左右 margin 来撑开距离
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>CSS 实现三栏布局 1</title>
- <style type="text/CSS">
- body{
- margin: 0;
- padding: 0;
- }
- .left{
- width:200px;
- height: 300px;
- background-color: #DC698A;
- float:left;
- }
- .middle{
- /*width:100%;*/
- /* 中间栏不要设宽度, 包括 100%*/
- height: 300px;
- background-color: #8CB08B;
- margin:0 200px;
- }
- .right{
- width: 200px;
- height: 300px;
- background-color: #3EACDD;
- float: right;
- }
- </style>
- </head>
- <body>
- <!-- 左栏左浮右栏右浮, 中间不设宽度用左右 margin 值撑开距离, 且布局中中间栏放最后 -->
- <!-- 中间栏实际宽度是当前屏的 100% -->
- <div class="left"> 左栏 </div>
- <div class="right"> 右栏 </div>
- <div class="middle"> 中间栏 </div>
- </body>
- </HTML>
注意: 该方法在 HTML 布局时, 要把中间栏放在左栏, 右栏后面, 左栏和右栏的顺序不定
实现的效果如下:
自身浮动实现三栏布局
2. 方法二: margin 负值法
实现方法: 两边两栏宽度固定, 中间栏宽度自适应, 左栏, 右栏, 中间栏向左浮动, 左栏的 margin-left 设为 - 100%, 中间栏的 width 设为 100%, 右栏的 margin-left 设为 - 右栏宽度
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>CSS 实现三栏布局 2</title>
- <style type="text/CSS">
- body{
- margin:0;
- padding:0;
- }
- .left{
- width:200px;
- height: 300px;
- background-color: #DC698A;
- float:left;
- margin-left:-100%;
- }
- .middle{
- width:100%;
- height: 300px;
- background-color: #8CB08B;
- float:left;
- }
- .right{
- width:200px;
- height: 300px;
- background-color: #3EACDD;
- float: left;
- margin-left: -200px;
- }
- </style>
- </head>
- <body>
- <!-- 左栏中间栏右栏左浮, 左栏 margin-left:-100%, 中间栏宽 100%,, 右栏 margin-left:- 右栏宽度
- 且布局上必须中间栏放第一个 -->
- <div class="middle"> 中间栏 </div>
- <div class="left"> 左栏 </div>
- <div class="right"> 右栏 </div>
- </body>
- </HTML>
注意: 该方法在 HTML 布局时, 要把中间栏放在第一个
此方法是实现圣杯布局和双飞翼布局的基础.
实现的效果如下:
margin 负值法实现三栏布局
3. 方法三: 绝对定位法
实现方法: 左栏, 右栏绝对定位, 分别固定到页面左右两侧, 中间栏不设宽度, 用左右 margin 来撑开距离
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>CSS 实现三栏布局 3</title>
- <style type="text/CSS">
- body{
- margin:0;
- padding: 0;
- }
- .left{
- width:200px;
- height: 300px;
- background-color: #DC698A;
- position: absolute;
- left:0;
- top:0;
- }
- .middle{
- /*width: 100%;*/
- height: 300px;
- background-color: #8CB08B;
- margin:0 200px;
- }
- .right{
- width:200px;
- height: 300px;
- background-color: #3EACDD;
- position: absolute;
- right:0;
- top:0;
- }
- </style>
- </head>
- <body>
- <!-- 左右两栏绝对定位, 分别固定到页面的左右两侧, 中间栏不设宽度, 用左右 margin 撑开距离 -->
- <!-- 中间栏的实际宽度是当前屏的 100% -->
- <div class="left"> 左栏 </div>
- <div class="middle"> 中间栏 </div>
- <div class="right"> 右栏 </div>
- </body>
- </HTML>
实现的效果如下:
绝对定位法实现三栏布局
来源: https://www.qcloud.com/developer/article/1351067