一列布局：
一列固定宽度、一列固定宽度居中、一列自适应宽度、一列自适应宽度居中
一列固定宽度
<head>
<style type="text/css">
#layout { height: 300px; width: 400px; background: #99FFcc; }
</style>
</head>
一列固定宽度居中
<head>
<style type="text/css">
#layout { height: 300px; width: 400px; background: #99FFcc; margin: auto; }
</style>
</head>
一列自适应宽度
<head>
<style type="text/css">
#layout { height: 300px; background: #99FFcc;}
</style>
</head>
一列自适应宽度居中
<head>
<style type="text/css">
body { margin: 0px; }
#layout { margin:auto; height: 300px; background: #99FFcc; width: 80%; }
</style>
</head>
两列布局
二列自适应宽度、两列固定宽度、两列固定宽度居中、float属性。
二列自适应宽度
<head>
<style type="text/css">
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }
</style>
</head>
两列固定宽度
<head>
<style type="text/css">
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }
</style>
</head>
两列固定宽度居中
<head>
<style type="text/css">
#content { width:470px; margin:0 auto;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }
</style>
</head>
float属性
<head>
<style type="text/css">
body { font-size:18px; line-height:200%; }
#side { float:left;width:202px;}
#main { margin-left:202px;}
</style>
</head>
三列布局
三列自适应宽度、三列固定宽度、三列固定宽度居中、
IE6的3像素bug
三列自适应宽度
<head>
<style type="text/css">
body { margin:0;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
#main { background: #99FFFF; height: 300px; margin:0 120px; }
</style>
</head>
三列固定宽度
<head>
<style>
body { margin:0;}
#content { width:470px; margin:0 auto;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
#main { background: #99FFFF; height: 300px; margin:0 120px; }
</style>
</head>
三列固定宽度居中
<head>
<style>
body { margin:0;}
#content { width:470px; margin:0 auto;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
#main { background: #99FFFF; height: 300px; margin:0 120px; }
</style>
</head>
浙公网安备 33010602011771号