学习
实践
活动
专区
工具
TVP
写文章
专栏首页iOS开发干货分享每天一道前端面试题:左边宽度固定,右边⾃适应

每天一道前端面试题:左边宽度固定,右边⾃适应

左侧固定宽度,右侧⾃适应宽度的两列布局实现

html结构

<div class="outer">
 <div class="left">固定宽度</div>
 <div class="right">⾃适应宽度</div>
</div>

在外层 div (类名为 outer )的 div 中,有两个⼦ div ,类名分别为leftright ,其中 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; }
文章分享自微信公众号:
web前端小剧场

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:前端老司机
原始发表时间:2020-07-17
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 两个div并排,左边div固定宽度,右边宽度自适应

    发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/119533.html原文链接:https://javaforall.cn

    全栈程序员站长
  • (2019)[前端]面试题[1]:CSS BFC是什么【BFC详解】

    BFC(Block Formatting Context)格式化上下文,是盒模型的一种渲染布局,简言之可以理解为 一个独立的容器,不受外部影响,不影响外部。

    无道
  • css布局 - 工作中常见的两栏布局案例及分析

      突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法。临时就在我经常浏览的网站上抓的相对应的截图。(以后看到其他类型的我再补充)

    xing.org1^
  • 2018年各大互联网前端面试题三(阿里)

    王小婷
  • 前端CSS Flex布局8大重难点知识,收藏起来吧

    Flex 布局将成为未来布局的首选方案。这也是学习前端必须掌握的主流布局方案!今天给大家分享一下 Flex 布局的 8 大重难点知识。

    艾编程
  • CSS Margin中5个经典布局解决方案,重难点知识,记得收藏复习

    前几天我在面试前端开发同学的时候,有问到关于margin基础布局相关内容的过程中,发现很多同学基本解释不清楚,今天刚好有点时间就整理了一篇笔记出来。就以下5点在...

    艾编程
  • 【面试题】CSS知识点整理(附答案)

    css引入伪类和伪元素概念是为了格式化文档树以外的信息。伪类和伪元素是用来修饰不在文档树中的部分。

    木子星兮
  • Sketch的Resizing功能竟然还能这么用,以后做界面再也不怕加班了

    随着越来越多的设计团队使用Sketch构建UI界面,这颗金光闪闪的大钻石已成为众多UI设计师的标配,设计生产力被极大地解放出来。而且在组件化设计、响应式设计、团...

    奔跑的小鹿
  • 【春节日更】经典布局题 — 圣杯和双飞翼

    实现方式有很多种,本文主要介绍圣杯布局和双飞翼布局这两种方法,实现上述布局的方法与区别

    用户9914333
  • 013. 罗马数字转整数 | Leetcode题解

    罗马数字包含以下七种字符: I , V , X , L , C , D 和 M 。

    苏南
  • css布局 - 两栏自适应布局的几种实现方法汇总

    这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题。很有必要掌握以备不时之需:

    xing.org1^
  • python测试开发django-134.CSS页面布局:左侧固定,右侧自适应布局

    常见的后台管理页面,左侧固定宽度展示操作菜单栏,右侧显示左侧展示管理内容。 这是一种最常见的左侧固定,右侧自适应布局方式。

    上海-悠悠
  • 建议收藏!总结了42种前端常用布局方案

    对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新,实现各种布局的方式已经多得数不胜数了。

    用户6835371

扫码关注腾讯云开发者

领取腾讯云代金券