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制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
Mar 15 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 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
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
PHP链表操作简单示例
2016/10/15 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
python挖矿算力测试程序详解
2019/07/03 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
python 弧度与角度互转实例
2020/04/15 Python
django orm模块中的 is_delete用法
2020/05/20 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
python和php哪个容易学
2020/06/19 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
休学证明范本
2015/06/19 职场文书
校运会宣传稿大全
2015/07/23 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
Python Pandas 删除列操作
2022/03/16 Python