CSS实现左边固定宽右边自适应布局咋做
发布时间：2023-07-01 12:35:56 所属栏目：语言 来源：
导读： 本篇内容介绍了“CSS实现左边固定宽右边自适应布局怎样做”的有关知识，在实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大家仔
|
本篇内容介绍了“CSS实现左边固定宽右边自适应布局怎样做”的有关知识，在实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ 这是一道面试题，你有多少种办法呢？ 这里我们假设左边名为 left，宽度为 200 px，右边名为 right。即默认 .left { width: 200px; } 我的理解分四大类 flex 布局 需设置父元素高度 grid 布局 需设置父元素高度 绝对定位 双子元素 absolute 不需要设置父元素高度 子元素都设置高度，右边子元素 left：200px + width: 100% 左元素 absolute + 右元素 margin-left 不需要设置父元素高度 子元素都设置高度，右边子元素 margin-left: 200px + width: 100% float 浮动 左元素左浮动，右元素不动 无需父元素 左元素需设置宽高和浮动，右元素设置高度即可 左元素左浮动，右元素右浮动 无需父元素 左元素设置宽高和左浮动，右元素设置右浮动以及高和宽（width: calc(100% - 200px)） flex 布局 需要一个父元素做 flex 布局，且需要给它一个高度（撑开容器） .father { display: flex; height: 200px; } .right { flex: 1; } grid 布局 高级的布局方式，子元素不需要设置宽度，单单设置父元素属性即可。 .grid { display: grid; grid-template-columns: 200px 100%; height: 200px; } 双子元素 + absolute 需要给子元素设置宽高，不然撑不起来。右元素设置left: 200px .father { position: relative; height: 200px; } .left { position: absolute; height: 200px; } .right { position: absolute; left: 200px; height: 200px; width: 100%; } 左元素 absolute + 右元素 margin-left .father { position: relative; height: 200px; } .left { position: absolute; width: 200px; height: 200px; } .right { width: 100%; height: 200px; margin-left: 200px; } 无父元素 + 左元素左浮动，右元素不动 前两种都需要有个父元素，但浮动不需要 左边浮动，下一个元素独占位置，并排一行 同样，需要设置高度，子元素才能撑开 .left { float: left; height: 200px; } .right { height: 200px; } 无父元素 + 左边左浮动，右边有浮动 浮动不需要父元素，浮动就区别于正常文档流 我的理解是正常文档流是二维层面，而浮动相当于成了三维，区别于 Z 轴 右边元素有浮动不够，还需要设置宽度 .left { float: left; height: 200px; } .right { float: right; height: 200px; width: calc(100% - 200px); } 只要是 float 实现此功能的，都不需要父元素，以及自身都需要设置高度 总结 简单来说，实现布局最好的方式是 flex，简单兼容现代浏览器和机型。当然，我是因为还没有学 grid（但 grid 要记得参数比较多）。绝对定位和浮动各有优缺点 各大方法 优缺点 需要什么 flex 布局简单 需要父元素、高度。子项 flex:1 grid 布局最简单，但兼容性更现代 只需要父元素设置属性就好 绝对定位 兼容性更高 需要父元素做相对定位、高度 浮动 兼容性更高 不需要父元素，子项都需要宽高 float 区别于其他三种，不需要父元素做容器 grid 区别于其他三种，不需要设置子元素（左元素的）宽 绝对定位区别于其他三种，它的方法不仅要父元素有高，其子元素也要有高 flex 最简单 （编辑：聊城站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
