中间定宽，两边自适应布局的三种实现方法
1. 浮动加定位
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>中间定宽，两边自适应</title> <style type="text/css"> html,body,div{ height: 100%; } .parent{ position: relative; overflow: hidden; } .left{ float: left; width: 50%; margin-left: -150px; background-color: red; } .right{ float: right; width: 50%; margin-right: -150px; background-color: yellow; } .center{ position: absolute; left:50%; transform:translateX(-50%); width: 300px; background-color: green; } .left .item{ margin-left: 150px; } .right .item{ margin-right: 150px; } </style> </head> <body> <div class="parent"> <div class="left"> <div class="item"></div> </div> <div class="right"> <div class="item"></div> </div> <div class="center"> <div class="item"></div> </div> </div> </body> </html>
2. calc计算法
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>中间定宽，两边自适应</title> <style type="text/css"> html,body,div{ height: 100%; } .left{ width: calc(50% - 150px); float: left; background-color: red; } .right{ width: calc(50% - 150px); float: right; background-color: yellow; } .center{ width: 300px; float: left; background-color: green; }
3. 弹性盒子法
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>中间定宽，两边自适应</title> <style type="text/css"> html,body,div{ height: 100%; } .parent{ display: flex; } .left{ flex:1; background-color: red; } .right{ flex:1; background-color: yellow; } .center{ width: 300px; background-color: green; } </style> </head> <body> <div class="parent"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> </body> </html>
989
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
