第一种方法：绝对定位:
<!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><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；