专栏首页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前端小剧场(webxiaojuchang),作者:前端老司机

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 快速上手小程序云开发

    云函数是一段运行在云端的代码,无需管理服务器,在开发工具内编写,一键上传部署即可运行后端的代码。

    达达前端
  • css布局 - 工作中常见的两栏布局案例及分析

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

    xing.org1^
  • Unity零基础到入门 ☀️| 万字教程 对 Unity 中的 Navigation导航系统基础 全面解析+实战演练【收藏不迷路】

    现实世界中的导航则是输入一个起点和一个终点,我们的导航软件就会规划出一个合适的行进路线。

    呆呆敲代码的小Y
  • 【面试题】CSS知识点整理(附答案)

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

    木子星兮
  • css布局 - 两栏自适应布局的几种实现方法汇总

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

    xing.org1^
  • 移动端UI界面设计之APP字体排版原则| 萧蕊冰

    今天介绍的是移动端UI界面设计的有关APP字体排版原则的内容。除了电脑端的网站UI设计,移动端的界面设计也是UI设计中的一个重要部分,毕竟我们每个人平时身上带着...

    萧蕊冰
  • (2019)[前端]面试题[1]:CSS BFC是什么【BFC详解】

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

    无道
  • CSS基础布局

    lesM10
  • 【面试题】104道 CSS 面试题,助你查漏补缺(下)

    https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css....

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

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

    奔跑的小鹿
  • 104道 CSS 面试题,助你查漏补缺(下)

    https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css....

    刘小夕
  • 欲练JS,必先攻CSS——前端修行之路

    来源:子慕大诗人 http://www.cnblogs.com/1wen/p/6839779.html 今天我讲的主题是css,具体聊一下我大概的css学习历史...

    企鹅号小编
  • vivo悟空活动中台-基于行为预设的动态布局方案

    作为前端工程师,页面布局是基本功。面对悟空中台的海量的活动需求,仅仅有几招常规的布局套路显然是难以招架的,悟空开发者团队从个性化需求中提炼特定场景下的共性特点,...

    2020labs小助手
  • 蚂蚁一面二面18道Java真题解析【附答案】!

    今年,从java转到别的行业的人不少,也有不少人挤进这个市场想要分得一杯羹。年复一年,年年如此。当然,Java程序员市场需求依然是比较大的,而且Java岗位晋升...

    Java程序猿
  • 如何解决网页的宽高自适应问题

    在假期里较系统的学习了html的静态网页制作,但在这过程中出现了一系列问题,比如:如何用盒子模型布局;如何用html和css实现轮播图的效果等;值得我们关注的是...

    算法与编程之美
  • CSS 7:网页布局(传统布局,flex布局,布局套路)

    width: 1000px; //或 max-width: 1000px; margin-left: auto; margin-right: auto; 演示地...

    代码之风
  • css菜鸡的自我救赎

    我们看百度搜索的顶部,顶部的#head(搜索框这一行都是)是fixed的,紧接着的那个div是一个tab。当然fixed脱离文本流,就用padding把自己的主...

    IMWeb前端团队
  • 高三学生发表AI论文,提出针对网络暴力问题的新模型AdaGCN

    【导读】近日,在清华大学举行的丘成桐中学科学奖半决赛落下帷幕,来自海内外的 72 支队伍获得了总决赛的入场券,北京师范大学附属实验中学的高三学生白行健,也在其中...

    AI科技大本营
  • css左侧固定宽度,右侧自适应的几种实现方法

    左侧固定,右侧自适应或者右侧固定在,左侧自适应是一样的。这种布局很常见,而且面试过程中也经常会问到,这里我总结的方法一共有5种。要实现这种布局,也算比较简单。我...

    寻找石头鱼

扫码关注云+社区

领取腾讯云代金券