三列布局方式1利用浮动)css样式部分style *{ margin:0; padding:0; } html,body{ height:100%; } div{ float:left; height:100%; } .main{ background:blue; width:100%; box-sizing:border-box; padding-left:200px; padding-right:200px; } .left{ background:purple; width:200px; margin-left:-100%;/*其实就是左边框距离右边的距离为100%*/ } .right{ background:green; width:200px; margin-right:-100%; } /stylehtml部分body div classmain中间的内容/div div classleft左边/div div classright右边/div /body这里需要注意一点就是中间自适应的那一块放在最前面。第二个需要知道的知识点是box-sizing的用法。方式2利用flex布局html部分 body div classwrapper div classleft左边/div div classcenter中间/div div classright右边/div /div /bodycss部分 style html,body{ padding:0; margin:0; } .wrapper{ width:800px; height:300px; border:1px solid black; display:flex; margin:0 auto; } .left,.right,.center{ height:300px; } .left,.right{ flex:0 0 200px; width:200px; background:cornflowerblue; } .center{ margin:0 10px; flex:1; background:pink; } /style运行结果方式3(利用position的绝对定位)css部分 style html,body{ margin:0; padding:0; } .wrapper{ position:relative; width:800px; height:400px; border:1px solid black; } .main{ width:100%; height:400px; box-sizing:border-box; padding:0 200px; background:pink; } .left,.right{ position:absolute; width:200px; height:400px; background:dodgerblue; } .left{ left:0; top:0; } .right{ top:0; right:0; } /stylehtml部分 body div classwrapper div classmain中间内容区/div div classleft左边区域/div div classright右边区域/div /div /body运行结果