1.左侧绝对定位法
直接看代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS两列布局——第一种方法</title> <style> .left { position: absolute; height: 500px; width: 300px; background: #333; color: #ccc; } .right { height: 500px; background: #ddd; margin-left: 300px; } </style> </head> <body> <div class="left"> 左侧设置绝对定位 </div> <div class="right"> 右侧左边距margin-left设为左侧的宽度，这是关键 </div> </body> </html>
效果如下：
关键点在于.left的position:absolute和.right的margin-left:300px;
2.左侧浮动法（右侧不浮动）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS两列布局——第二种方法</title> <style> .left { float: left; height: 500px; width: 300px; background: #333; color: #ccc; } .right { overflow: auto; height: 500px; background: #ddd; } </style> </head> <body> <div class="left"> 左侧设置左浮动 </div> <div class="right"> 右侧设置overflow:auto </div> </body> </html>
效果如下：
关键点：左侧设置左浮动，右侧设置overflow:auto，我也不知道为什么这样就有效，以后知道了来补充。
3.Flex布局法（建议移动端页面使用）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS两列布局——第三种方法，flex布局</title> <style> .wrapper { display: flex; } .left { flex: 0 0 25%; width: 25%; height: 500px; background: #333; color: #ccc; } .right { flex: 1; height: 500px; background: #ddd; } </style> </head> <body class="wrapper"> <div class="left"> flex子元素：固定宽度，可用百分比 </div> <div class="right"> flex子元素：宽度不定，但是flex:1,否则它是随内容而撑开。 </div> </body> </html>
效果如下：
