两栏式布局
要求：先加载内容区域，内容区域宽度自适应
1.使用绝对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>两栏布局</title> <style type="text/css"> *{ margin: 0; padding: 0; } /* 使用position:absolute */ .left{ position: absolute; top: 0; left: 0; width: 200px; height: 200px; background-color: red; } .main{ margin-left: 200px; height: 200px; background-color: blue; } </style> </head> <body> <!-- 两栏布局，先加载内容区域 --> <div class="main"></div> <div class="left"></div> </body> </html>
2.使用浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>两栏布局</title> <style type="text/css"> *{ margin: 0; padding: 0; } /* 使用float解决 */ .main{ float: left; margin-left: 200px; width: 100%; height: 200px; background-color: blue; } .left{ width: 200px; height: 200px; background-color: red; } </style> </head> <body> <!-- 两栏布局，先加载内容区域 --> <div class="main"></div> <div class="left"></div> </body> </html>
三栏式布局
要求：两边宽度固定，中间自适应
（1）先加载内容中间区域
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三栏式布局</title> <style type="text/css"> *{ margin: 0; padding: 0; } .container{ width: 100%; height: 100%; } .main{ width: auto; margin-left: 200px; margin-right: 300px; background-color: red; } .left{ position: absolute; width: 200px; left: 0; top: 0; background-color: yellow; } .right{ position: absolute; width: 300px; right: 0; top: 0; background-color: green; } </style> </head> <body> <div class="container"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
（2）后加载内容中间区域
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三栏式布局</title> <style type="text/css"> *{ margin: 0; padding: 0; } /* 使用float解决 */ .left{ float: left; width: 200px; height: 200px; background-color: red; } .right{ float: right; width: 200px; height: 200px; background-color: yellow; } .main{ width: 100%; height: 200px; background-color: blue; } </style> </head> <body> <!-- 三栏式布局 两边宽度固定，中间自适应--> <div class="left"></div> <div class="right"></div> <div class="main"></div> </body> </html>