首页 > > 网页制作 > css >

CSS多列布局（实例）

2018-06-24 02:21:54来源：未知阅读 ()

前言

一列布局
二列布局
三列布局

1 一列布局

一列布局：

HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>一列布局</title>
</head>
<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="foot">foot</div>
</body>
</html>


CSS部分
div{text-align: center;}
.head{height: 60px;background-color:#fae1e1;}
.main{margin: 0 auto;height:300px;background-color:#e6686a;}
.foot{margin: 0 auto;background-color:red;}

效果图如下：

2 二列布局

二列布局代码如下（即左右布局），二列布局有多种方法，float+margin（一侧定宽，一侧自动）、position+margin（一侧定宽，一侧自动）、float+负margin（一侧定宽，一侧自动）等，本篇用的是设定两栏的宽度的百分比，随宽度自适应变化代码如下：

HTML部分
<!DOCTYPE html>
<html>
<head>
<title>二列布局</title>
</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html

CSS部分
body{ margin:0; padding:0; font-size:20px; font-weight:bold}
div{ text-align:center; line-height:50px}
.main{ width:80%; height:400px; margin:0 auto}
.left{ width:20%; height:400px; background:#e6686a; float:left}
.right{ width:80%; height:400px; background:#fae1e1; float:right}

效果图如下：

3 三列布局

三列布局（即左中右布局），三列布局有多种方法，float+margin（两侧定宽，中间自适应）、position+margin（两侧定宽，中间自适应）、float+负margin（两侧定宽，中间自适应）、float+position+margin（两侧自动，中间定宽）、position+margin（两侧自动，中间定宽），本篇用的是float+margin（两侧定宽，中间自适应），代码如下：

HTML部分
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="left">left</div>
<div class="center">main</div>
<div class="right">right</div>
</body>
</html>

CSS部分
body{ margin:0; padding:0; font-weight:bold}
div{ line-height:40px}
.left{height:400px; width:200px; position: absolute; left:0; top:0;background:#fae1e1;}
.right{ height:400px; width:200px; position:absolute; top:0;right:0;; background:#fae1e1}
.center{ height:400px; margin:0 200px; background:#e6686a}