每天一道前端面试题:左边宽度固定,右边⾃适应
时间:2022-07-22
本文章向大家介绍每天一道前端面试题:左边宽度固定,右边⾃适应,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
左侧固定宽度,右侧⾃适应宽度的两列布局实现
html结构
<div class="outer">
<div class="left">固定宽度</div>
<div class="right">⾃适应宽度</div>
</div>
在外层 div
(类名为 outer
)的 div
中,有两个⼦ div
,类名分别为left
和 right
,其中 left
为固定宽度,⽽ right
为⾃适应宽度
⽅法1:左侧div设置成浮动:float: left,右侧div宽度会⾃拉升适应
.outer {
width: 100%;
height: 500px;
background-color: yellow; }
.left {
width: 200px;
height: 200px;
background-color: red;
float: left; }
.right {
height: 200px;
background-color: blue; }
⽅法2:对右侧:div进⾏绝对定位,然后再设置right=0,即可以实现宽度⾃适应
绝对定位元素的第⼀个⾼级特性就是其具有⾃动伸缩的功能,当我们将width 设置为 auto 的时候(或者不设置,默认为 auto ),绝对定位元 素会根据其 left 和 right ⾃动伸缩其⼤⼩
.outer {
width: 100%;
height: 500px;
background-color: yellow;
position: relative; }
.left {
width: 200px;
height: 200px;
background-color: red; }
.right {
height: 200px;
background-color: blue;
position: absolute;
left: 200px;
top:0;
right: 0; }
⽅法3:将左侧div进⾏绝对定位,然后右侧div设置margin-left: 200px
.outer {
width: 100%;
height: 500px;
background-color: yellow;
position: relative; }
.left {
width: 200px;
height: 200px;
background-color: red;
position: absolute; }
.right {
height: 200px;
background-color: blue;
margin-left: 200px; }
⽅法4:使⽤flex布局
.outer {
width: 100%;
height: 500px;
background-color: yellow;
display: flex;
flex-direction: row; }
.left {
width: 200px;
height: 200px;
background-color: red; }
.right {
height: 200px;
background-color: blue;
flex: 1; }
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
- laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
- 使用Python实现微信提醒备忘录功能
- 对web.py设置favicon.ico的方法详解
- PHP pthreads v3下同步处理synchronized用法示例
- 浅谈pycharm的xmx和xms设置方法
- PHP pthreads v3下worker和pool的使用方法示例
- 浅谈python脚本设置运行参数的方法
- laravel框架实现敏感词汇过滤功能示例
- python 接收处理外带的参数方法
- Django框架实现的简单分页功能示例
- php测试kafka项目示例
- Python读取YUV文件,并显示的方法
- php-7.3.6 编译安装过程
- PHP查找一列有序数组是否包含某值的方法