第一种方法：绝对定位:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body,html{ padding: 0; margin: 0; height: 100%;}
.left,.right{ width: 230px; height: 100%; position: absolute; top: 0;}
.right{ right: 0; background: green;}
.left{ left: 0; background: blue;}
.main{ margin: 0 230px; height: 100%; background: yellow;}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</body>
</html>
这种方法是最简单，也是麻烦最多的，如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。我个人现在不再建议使用这种布局。
第二种方法：浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body,html{ padding: 0; margin: 0; height: 100%;}
.left,.right{ float: left; width: 230px; height: 100%; background: blue;}
.right{ float: right; }
.main{ margin: 0 230px; height: 100%; background: yellow;}
</style>
</head>s
<body>
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</body>
</html>
这种方法和上面的绝对定位方法很相似，只不过这里采用的是浮动，而不是绝对定位，左右定宽度分别进行左浮动和右浮动，此时主内容列（中间列没有定度）主会自动插入到左右两列的中间，最要注意的一点是，中间列一定要放在左右两列的后面，
第三种方法：-marin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.main,.left,.right{ float: left; }
.main{ width: 100%;}
.main-inner{ margin: 0 230px; background: yellow; height: 500px; }
.left{ margin-left: -100%; width: 230px; background: blue; height: 500px;}
.right{ margin-left: -230px; width: 230px; background: green; height: 500px;}
</style>
</head>
<body>
<div class="main">
<div class="main-inner"></div>
</div>
<div class="left">
</div>
<div class="right">
</div>
</body>
</html>
此方法在中间div内又包含一个div让其左右留出空间又不影响整个儿浮动文本，左栏是左浮动并加了一个“margin-left: -100%”，这是因为div#left前面有一个div#main，并且其宽度为100%，这样一来在左栏定这个margin-left: -100%;刚好使左边栏定位到页面的最左边；而右栏也进行左浮动，但其定义的“margin-left”也是负值，并且等于其自身的宽度230px；
时间： 2024-12-21 19:15:05