兩側定寬中間自適應的幾種方法
阿新 • • 發佈：2019-01-01
1.使用浮動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } #left,#right{ width: 200px; height: 100px; background-color: red; } #left{ float: left; } #right{ float: right; } #center{ height: 100px; background: yellow; } </style> </head> <body> <div id="box"> <div id="left"></div> <div id="right"></div> <div id="center"> </div> </div> </body> </html>
2.使用定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .box>div{ position: absolute; height: 100px; } .left{ left: 0; width: 200px; background: red; } .center{ left: 200px; right: 200px; background: yellow; } .right{ right: 0; width: 200px; background: red; } </style> <body> <div class="box"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> </body> </html>
3.使用flex
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ display: flex; height: 100px; } .left{ width: 200px; background: red; } .center{ flex: 1; background: yellow; } .right{ width: 200px; background: red; } </style> </head> <body> <div class="box"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> </body> </html>
4.使用table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100%;
display: table;
height: 100px;
}
.box>div{
display: table-cell;
}
.left{
width: 200px;
background: red;
}
.center{
background: yellow;
}
.right{
width: 200px;
background: red;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>5.使用grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns:200px auto 200px;
}
.left,.right{
background: red;
}
.center{
background: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>