怎么实现三个并排的div自适应
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>
1、<body>
实现三个并排div，两边固定宽度，中间自适应的四个方法
2、<div class="container float">
<div class="left">左边内容</div>
<div class="right">右边内容</div>
<div class="center">中间内容：方法一：float法</div>
</div>
3、<div class="container position">
<div class="left">左边内容</div>
<div class="center">中间内容：方法二：position法</div>
<div class="right">右边内容</div>
</div>
4、<div class="container flex">
<div class="left">左边内容</div>
<div class="center">中间内容：方法三：flex法</div>
<div class="right">右边内容</div>
</div>
5、<div class="container table">
<div class="left inner">左边内容</div>
<div class="center inner">中间内容：方法四：table法</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>
实现三个并排div，两边固定宽度，中间自适应的第一种方法
<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>
实现三个并排div，两边固定宽度，中间自适应的四个方法
<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>