微芒科技网站建设top,医院导航网站怎么做,网络安全监测服务,网站编辑器失效最近面试的时候遇到一个提问说#xff0c;如何做到一个左右宽度固定#xff0c;中间自适应的布局#xff0c;我的答案不重要#xff0c;重要的是不是面试官想听到的答案#xff0c;这样问大概率他想听到的答案一定是双飞翼布局#xff0c;所以今天就手敲一个双飞翼布局让…最近面试的时候遇到一个提问说如何做到一个左右宽度固定中间自适应的布局我的答案不重要重要的是不是面试官想听到的答案这样问大概率他想听到的答案一定是双飞翼布局所以今天就手敲一个双飞翼布局让大家搞明白。
首先我们有三个盒子div分别是center、left、right
div classcontainerdiv classcenter中间/divdiv classleft左/divdiv classright右/div
/div然后我们给三个div设置宽高和背景色方便我们看,中间要自适应所以宽度为100% .center {background-color: pink;width: 100%;height: 100vh;}.left {background-color: red;width: 200px;height: 100vh;}.right {background-color: blue;width: 200px;height: 100vh;}我们为了让三个div在同一行所以设置container下的三个div都浮动布局 .container div{float: left;}此时效果是这样的左右两个div是被挤下去
我们通过margin-left值把左右两个div给定位到一行左边-100%右边div宽度是多少就负的多少px .left {background-color: red;width: 200px;height: 10vh;margin-left: -100%;}.right {background-color: blue;width: 200px;height: 10vh;margin-left: -200px;}就这样了拜~
