现三个并排的div自适应办法有四种方法一：float法。想必用得挺多，使左右两边的div分别向左/右浮动，脱离正常流。注意把中间div放在最后，最后清楚浮动即可。方法二：position法。父级div相对布局，然后左右div针对父级决定布局，中间自适应。方法三：flex法。display:flex;是css3新出的弹性盒模型。用flex-diretion:row;决定父级div主轴方向为水平铺开。flex-basis;让左右div占据主轴100px。flex-grow定义中间div的放大比例为1，适应剩下的宽度方法四：table法。也是css3新出的属性。————————————————版权声明：本文摘自CSDN博主「SylviaChang」的原创文章以上内容由该文摘录，本人修改整理解析，备注让新手更易学习和使用原文效果第一张图片和修改后效果为第二张图片修改后能更显自适应性
工具/原料
dreamwever或记事本
head部代码
1、<!DOCTYPE html><html><head> <稆糨孝汶;meta charset="UTF-8"> <title>三个div并排</title> <style> *{ margin: 0px; padding: 0px; } .container{ width:100%;/*这个表格的总宽度，此处将原文的500px改为100%*/ height:200px;/*这个表格的总高度*/ margin: 10px auto; } .left, .right{ width: 100px; /*表格的左边，右边的宽度，需要不一样可以分别写*/ height: 100%;/*表格的左边，右边的高度，需要不一样可以分别写*/ background-color: antiquewhite;/*表格的左边，右边的颜色*/ } .center{ background-color: aquamarine;/*表格的中间的颜色*/ }
2、/*方法一：float*/ .float .left{ float: left; } .float .right{ float: right; } .float .center{ height: 100%; margin: 0px 100px; } .float .container:after{ display: block; content: ""; height: 0px; clear: both; overflow: hidden; zoom: 1; }
3、 /*方法二：position法*/ .position{ position: relative; } .position .left{ position: absolute; top: 0px; left: 0px; } .position .right{ position: absolute; top: 0px; right: 0px; } .position .center{ height: 100%; margin: 0px 100px; }
4、 /*方法三：flex*/ .flex{ display: flex; flex-direction: row; } .flex .left,.right{ flex-basis: 100px; -webkit-flex-basis: 100px; } .flex .center{ flex-grow: 1; }
5、 /*方法四：table法*/ .table{ display: table; } .table .inner{ display: table-cell; }
6、/*head结束：*/ </style></head>
body代码
1、<body><p>实现三个并排div，两边固定宽度，中间自适应的四个方法</p>
2、<div class="container float"> <div class="left">左边内容</div> <div class="right">右边内容</div> <div class="center">中间内容：<p>方法一：float法</p></div></div>
3、<div class="container position"> <div class="left">左边内容</div> <div class="center">中间内容：<p>方法二：position法</p></div> <div class="right">右边内容</div></div>
4、<div class="container flex"> <div class="left">左边内容</div> <div class="center">中间内容：<p>方法三：flex法</p></div> <div class="right">右边内容</div></div>
5、<div class="container table"> <div class="left inner">左边内容</div> <div class="center inner">中间内容：<p>方法四：table法</p></div> <div class="right inner">右边内容</div>
6、</div></body></html>
使用说明：
1、<style>到</style>之间的代码可另写CSS文件进行调用文中/*方法四：table法*/对应文中DIV的方法四：table法内容，同样一到四是可以分别对应的在这里分步写就是方便新手朋友更好对应如一个完整的第一种写法如下：以下代码部分开始===========================================<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>三个div并排</title> <style> *{ margin: 0px; padding: 0px; } .container{ width:100%;/*这个表格的总宽度*/ height:200px;/*这个表格的总高度*/ margin: 10px auto; } .left, .right{ width: 100px; height: 100%; background-color: antiquewhite; } .center{ background-color: aquamarine; }/*方法一：float*/ .float .left{ float: left; } .float .right{ float: right; } .float .center{ height: 100%; margin: 0px 100px; } .float .container:after{ display: block; content: ""; height: 0px; clear: both; overflow: hidden; zoom: 1; } </style></head><body><p>实现三个并排div，两边固定宽度，中间自适应的第一种方法</p><div class="container float"> <div class="left">左边内容</div> <div class="right">右边内容</div> <div class="center">中间内容</div></div></div></body></html>====================================代码部分结束各部分内容文字可代入自行需要的其他代码
2、关于CSS文件调用写法<link rel="stylesheet" type="text/css" href="CSS文件名.css" />注：CSS文件名尽量用英文字母，此文件应与页面同一根目录下，不同一根目录下要把正确路径加进去
3、CSS文件内容：以下为代码部分-----颍骈城茇------------------------------------------------------------------------ *{ margin: 0px; padding: 0px; } .container{ width:500px; height:200px; margin: 10px auto; } .left, .right{ width: 100px; height: 100%; background-color: antiquewhite; } .center{ background-color: aquamarine; }/*方法一：float*/ .float .left{ float: left; } .float .right{ float: right; } .float .center{ height: 100%; margin: 0px 100px; } .float .container:after{ display: block; content: ""; height: 0px; clear: both; overflow: hidden; zoom: 1; }======================================代码部分由此结束即文中：<style>到</style>之间的代码
4、完整的页代码如下以下代码部分=============================================<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>三个div并排</title><style>*{margin: 0px;padding: 0px;}.container{width:100%;height:200px;margin: 10px auto;}.left,.right{width: 100px;height: 100%;background-color: antiquewhite;}.center{background-color: aquamarine;}/*方法一：float*/.float .left{float: left;}.float .right{float: right;}.float .center{height: 100%;margin: 0px 100px;}.float .container:after{display: block;content: "";height: 0px;clear: both;overflow: hidden;zoom: 1;}/*方法二：position法*/.position{position: relative;}.position .left{position: absolute;top: 0px;left: 0px;}.position .right{position: absolute;top: 0px;right: 0px;}.position .center{height: 100%;margin: 0px 100px;}/*方法三：flex*/.flex{display: flex;flex-direction: row;}.flex .left,.right{flex-basis: 100px;-webkit-flex-basis: 100px;}.flex .center{flex-grow: 1;}/*方法四：table法*/.table{display: table;}.table .inner{display: table-cell;}</style></head><body><p>实现三个并排div，两边固定宽度，中间自适应的四个方法</p><div class="container float"><div class="left"></div><div class="right"></div><div class="center">方法一：float法</div></div><div class="container position"><div class="left"></div><div class="center">方法二：position法</div><div class="right"></div></div><div class="container flex"><div class="left"></div><div class="center">方法三：flex法</div><div class="right"></div></div><div class="container table"><div class="left inner"></div><div class="center inner">方法四：table法</div><div class="right inner"></div></div></body>
