网站建设制度都有哪些,注册小程序要多少钱,我想做网络推广找谁,做网站还需要买服务器么本文节选自我的博客#xff1a;实现两栏布局的五种方式 #x1f496; 作者简介#xff1a;大家好#xff0c;我是MilesChen#xff0c;偏前端的全栈开发者。#x1f4dd; CSDN主页#xff1a;爱吃糖的猫#x1f525;#x1f4e3; 我的博客#xff1a;爱吃糖的猫… 本文节选自我的博客实现两栏布局的五种方式 作者简介大家好我是MilesChen偏前端的全栈开发者。 CSDN主页爱吃糖的猫 我的博客爱吃糖的猫 Github主页: MilesChen 支持我点赞收藏⭐️留言介绍The mixture of WEBDeepLearningIotanything
前言
实现两栏布局也是一道经典的面试题两栏布局即左边固定右边伸缩要实现两栏布局的方式超过十种了下面举例五种用来抛砖引玉。
floatBFC
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title两栏布局/titlestyle/* 方法1 左元素固定宽度向左浮动 右元素不设置宽度会自动撑满重叠问题可使用BFC解决 *//* float让元素脱离正常标准流控制不再占有原来的位置*//* overflow: hidden是关键也可改成其他能触发BFC均可解决 利用了BFC的特点BFC 的区域不会与浮动元素发生重叠 */.left {width: 200px;height: 100px;background-color: red;float:left;}.right {height: 200px;background-color: blue;overflow: hidden;}/style/headbody div classouterdiv classleft左侧/divdiv classright右侧/div/div/body
/htmlfloatmargin
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title两栏布局/titlestyle/* 方法2 左元素固定宽度向左浮动 右元素不设置宽度会自动撑满使用margin-left */.left {width: 200px;height: 100px;background-color: red;float:left;}.right {height: 200px;background-color: blue;margin-left: 200px;}/style/headbody div classouterdiv classleft左侧/divdiv classright右侧/div/div/body
/htmlflex
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title两栏布局/titlestyle/* 方法3 利用 flex 布局左边元素固定宽度右边的元素设置 flex: 1 */.outer {display: flex;}.left {width: 200px;height: 100px;background: lightcoral;}.right {flex: 1;height: 200px;background: lightseagreen;}/style/headbody div classouterdiv classleft左侧/divdiv classright右侧/div/div/body
/html
左侧绝对定位
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title两栏布局/titlestyle/* 方法4 *//* 利用绝对定位父级元素设为相对定位。左边元素 absolute 定位宽度固定。右边元素的 margin-left 的值设为左边元素的宽度值。 */.outer {position: relative;}.left {position: absolute;width: 200px;height: 100px;background: lightcoral;}.right {margin-left: 200px;height: 200px;background: lightseagreen;}/style/headbody div classouterdiv classleft左侧/divdiv classright右侧/div/div/body
/html右侧绝对定位
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title两栏布局/titlestyle/* 方法5 *//* 利用绝对定位父级元素设为相对定位。左边元素宽度固定右边元素 absolute 定位 left 为宽度大小其余方向定位为 0 。 也可以只设置lefttop但要记得设置宽高*/.outer {position: relative;}.left {width: 200px;height: 100px;background: lightcoral;}.right {position: absolute;left: 200px;top: 0;right: 0;bottom: 0;height: 200px;background: lightseagreen;}/style/headbody div classouterdiv classleft左侧/divdiv classright右侧/div/div/body
/html总结
floatBFC第一栏float:left; overflow: hidden; 清除浮动显示第二栏floatmargin第一栏float:left给第二栏设置margin-leftflex将第二栏flex设置为1左边绝对定位第一栏绝地定位第二栏margin-left右边绝对定位第二栏绝对定位left为第一栏的宽度top: 0;left: 200px;right: 0;bottom: 0;
还有其他方式比如 grid 、floatcalc 、tablecalc 就不一一举例了。 感谢小伙伴们的耐心观看本文为笔者个人学习记录如有谬误还请告知万分感谢如果本文对你有所帮助还请点个关注点个赞~您的支持是笔者不断更新的动力
