CSS 左边固定宽右边自适应的6种方法


Posted in HTML / CSS onMay 15, 2022

这是一道面试题,你有多少种办法呢?

这里我们假设左边名为 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 最简单

到此这篇关于左边固定宽右边自适应的6种方法的文章就介绍到这了!

 
HTML / CSS 相关文章推荐
详解css3自定义滚动条样式写法
Dec 25 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 #HTML / CSS
css3 选择器
May 11 #HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
HTML CSS 一个标签实现带动画的抖音LOGO
常用的文件对应的MIME类型汇总
Apr 26 #HTML / CSS
通过feDisplacementMap和feImage实现水波特效
什么是css原子化,有什么用?
Apr 24 #HTML / CSS
You might like
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
python访问纯真IP数据库的代码
2011/05/19 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
Python探索之Metaclass初步了解
2017/10/28 Python
python实现kmp算法的实例代码
2019/04/03 Python
python离线安装外部依赖包的实现
2020/02/13 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
工程预算与管理应届生求职信
2013/10/06 职场文书
学校七一活动方案
2014/01/19 职场文书
2014年设计师工作总结
2014/11/25 职场文书
房屋维修申请报告
2015/05/18 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript