经典面试题（一）：俩个div并排，左边div固定宽度，右边宽度自适应

最新推荐文章于 2022-04-15 17:54:52 发布
最新推荐文章于 2022-04-15 17:54:52 发布
阅读量6.7k 收藏 17
点赞数 1
CC 4.0 BY-SA版权
分类专栏： javascript 文章标签： 前端面试题验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weiyongliang_813/article/details/84404964
本文探讨了五种不同的网页布局技巧，包括BFC、Flex布局、Table布局、Float结合Margin及Calc计算宽度，适用于不同场景，提供了丰富的代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在地铁上无聊看到一个面试帖子，“俩个div并排，左边div固定宽度，右边宽度自适应”，至少列出4种。
嗡，写了这么多年代码，竟然只能列出2种。回来还是写几个例子验证下。
方式一：BFC(块级格式化上下文)
思路：左边定宽，右边采用 overflow: hidden; /* 触发bfc */
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head class="h100b">
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    html,body{
      padding: 0;
      margin: 0;
      height: 100%;
    }
    div{
      padding: 0;
      margin: 0;
    }
    .h100b {
      width: 100%;
      height: 100%;
    }

    /*方法一： BFC(块级格式化上下文)*/
    .container {
      width: 100%;
      height: 100%;
    }

    .left {
      width: 200px;
      height: 100%;
      background: gray;
      float: left;
    }

    .right {
      height: 100%;
      overflow: hidden; /* 触发bfc */
      background: green;
    }

  </style>
</head>
<body class="h100b">

<div class="container">
  <div class="left">左边区域</div>
  <div class="right">右边区域</div>
</div>

</body>
</html>

兼容ie8+，其他浏览器都是ok的

方式二：采用flex布局
这种应该是最简单的方式，但flex兼容性不行，ie11都不支持
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head class="h100b">
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    html,body{
      padding: 0;
      margin: 0;
      height: 100%;
    }
    div{
      padding: 0;
      margin: 0;
    }
    .h100b {
      width: 100%;
      height: 100%;
    }
 
    .container {
      width: 100%;
      height: 100%;
      display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
      display: -moz-box; /* 老版本语法: Firefox (buggy) */
      display: -ms-flexbox; /* 混合版本语法: IE 10 */
      display: -webkit-flex; /* 新版本语法: Chrome 21+ */
      display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
    }

    .left {
      width: 200px;
      height: 100%;
      background: gray;
    }

    .right {
      height: 100%;
      background: green;
      -webkit-flex: 1; /* Chrome */
      -ms-flex: 1; /* IE 10 */
      flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
      -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
      -moz-box-flex: 1; /* OLD - Firefox 19- */
    }

  </style>
</head>
<body class="h100b">

<div class="container">
  <div class="left">flex左边区域</div>
  <div class="right">flex右边区域</div>
</div>

</body>
</html>

方式三：采用display:table的方式来实现布局
日常开发中说实话用display：table相对比较少，用 table布局倒是不少，但现在慢慢开始抛弃table来实现布局。
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head class="h100b">
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    html,body{
      padding: 0;
      margin: 0;
      height: 100%;
    }
    div{
      padding: 0;
      margin: 0;
    }
    .h100b {
      width: 100%;
      height: 100%;
    }

    .container{
      width: 100%;
      height: 100%;
      display:table;         /*table布局*/
    }
    .left{
      width:200px; height:100%;background:gray;
      display:table-cell;
    }
    .right{
      height:100%;background:green;
      display: table-cell;
    }


  </style>
</head>
<body class="h100b">

<div class="container">
  <div class="left">table左边区域</div>
  <div class="right">table右边区域</div>
</div>

</body>
</html>

测试了兼容性相对不错，ie8 都兼容，果断决定，今后得多用这东西了，比第一种方式采用overflow:hidden触发 BFC要好理解多了

方式四：采用float+margin-left的方式，来实现。这种方式不建议使用，因为这种方式，右边的div高度计算会不一样，高度不是由子元素撑开的，而是默认100%的高度。兼容ie8、IE8+
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head class="h100b">
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    html,body{
      padding: 0;
      margin: 0;
      height: 100%;
    }
    div{
      padding: 0;
      margin: 0;
    }
    .h100b {
      width: 100%;
      height: 100%;
    }

    .container{
      width: 100%;
      height: 100%;
    }
    .left{
      float:left;
      width:200px; height:100%;background:gray;
    }
    .right{
      height:100%;width:auto;margin-left:200px;background:#f00;
    }


  </style>
</head>
<body class="h100b">

<div class="container">
  <div class="left">float左边区域</div>
  <div class="right">;margin-left右边区域</div>
</div>

</body>
</html>

方式5：采用calc计算宽度的方式来实现
其实calc兼容性还行，ie9兼容，今后项目里面可以多用用了
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head class="h100b">
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    html,body{
      padding: 0;
      margin: 0;
      height: 100%;
    }
    div{
      padding: 0;
      margin: 0;
    }
    .h100b {
      width: 100%;
      height: 100%;
    }

    .container{
      width: 100%;
      height: 100%;
    }
    .left{
      float:left;
      width:200px; height:100%;background:gray;
    }
    .right{
      height:100%;
      float:right;
      background:#f00;
      width:calc(100% - 200px);
    }


  </style>
</head>
<body class="h100b">

<div class="container">
  <div class="left">calc左边区域</div>
  <div class="right">calc右边区域</div>
</div>

</body>
</html>

方式5：采用absolute+margin-left来实现，其实这个跟float:left+margin-left的方式类似。
兼容IE8+
在这里插入图片描述

代码如下:

<!DOCTYPE html>
<html lang="en">
<head class="h100b">
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    html,body{
      padding: 0;
      margin: 0;
      height: 100%;
    }
    div{
      padding: 0;
      margin: 0;
    }
    .h100b {
      width: 100%;
      height: 100%;
    }

    .container{
      width: 100%;
      height: 100%;
    }
    .left{
     position: absolute;
      width:200px; height:100%;background:gray;
    }
    .right{
      height:100%;
      background:#f00;
      margin-left: 200px;
      width: auto;
    }


  </style>
</head>
<body class="h100b">

<div class="container">
  <div class="left">absolute左边区域</div>
  <div class="right">margin-left右边区域</div>
</div>

</body>
</html>
div左右布局
weixin_34378045的博客
11-14 1569
一、左右定宽布局： 在css分别指定了左右两列的宽度的情况下，只需要将左边的div 向左浮动{float:left;}，右边的div 向右浮动{float:right;}，并清除浮动，即可实现。 常用的清除浮动有两种方式： a、通过在浮动元素的父级元素上添加清除浮动的class类：clearfix(见下面的css代码部分)； b、通过在浮动元素后面添加一个空元素，然后在这个空元素上定义cl...
div 左右排列 高度自适应_css实现div两列布局（两种方法）
weixin_39933336的博客
11-29 9352
一、应用场景左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应二、思路首先把这个问题分步解决，需要攻克以下两点：1、让两个div并排到一行2、让一个div宽度固定，另个div占据剩下宽度的空间关于第一点，首先要明确，div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute；关于第二点，首先有一个宽度固...
div+css模板布局 右侧固定，左侧自适应
09-11
div+css模板布局 右侧固定，左侧自适应
css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
热门推荐
LonelySnow的博客
04-08 2万+
1.应用场景 左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决，需要攻克以下两点： 1）让两个div并排到一行 2）让一个div宽度固定，另个div占据剩下宽度的空间 关于第一点，首先要明确，div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute； ...
左边一个div，右边对应两个div
博客
03-14 1380
<div style="width: 20%; height: 60px; float: left; background-color: red"> 右边大块 </div> <div style="width: 80%; height: 30px; float: left; background-color: pink"> 左边1块 </div> <div style="width: 80%;height: 30px;float: left;ba
2个div一个定宽一个自适应
qq_40649432的博客
04-15 820
第一种 .div-box1 { width: 100%; } .div1 { width: 100px; height: 100px; background-color: red; float: left;//只需要第一个div进行浮动 } .div2 { height: 100px; background-color: green; } 第二种 .div-box2 { width: 100%; position: relative; } .div3 { position: ab
div宽度自适应布局(左边自适应)
04-21
在左边自适应布局中，可以将左侧区域设为自适应的网格轨道，而右侧区域可以设定为固定宽度或自适应的网格轨道。 六、媒体查询（Media Queries） 为了实现跨设备的宽度自适应，可以使用CSS媒体查询。媒体查询允许...
相邻div实现一个跟着另一个自适应高度示例代码
09-25
`：分别将左侧和右侧的`div`浮动到左边和右边，以实现并排显示。 - `width:50%;`：分配给每个`div`相同的宽度，占据容器的一半。 - `background:`：设置背景色，左侧为灰色，右侧为淡蓝色，仅用于区分和展示效果。...
vue中实现拖动调整左右两侧div的宽度的示例代码
01-19
最近在使用vue的时候，遇到一个需求，实现左右div可通过中间部分拖拽调整宽度，类似于这样 这是我最终的实现效果 还是老话，因为我不是专业的前端工程师，只是兼职写一些简单的前端，所以这个功能的实现得益于以下...
HTML实现2列布局(左侧宽度固定，右侧自适应)的方法示例
12-13
本示例探讨了如何使用HTML和CSS实现一个两列布局，其中左侧宽度固定，右侧则自适应剩余空间。以下是对这两种方法的详细解释： **实现一：利用浮动（Float）** 在第一种方法中，我们主要利用CSS的`float`属性来实现...
多个div自适应宽度并排显示 超出部分...
06-08
可以使用 CSS 中的 `flexbox` 布局来实现多个 div 自适应宽度并排显示，并且超出部分显示省略号。 CSS 代码如下： ```css .container { display: flex; flex-wrap: wrap; /* 允许换行，以便实现自适应宽度 */ } ...
并排两个div，左边固定div宽度200px，右边div自适应的几种实现
l1013000729的博客
07-26 834
<div class= "container"> <div class="left"></div> <div class="right"></div> </div> <style> /*方法一： BFC(块级格式化上下文)*/ .container{ width:1000px;height:400px;border: 1px solid red; } .l...
左右两栏div布局，高度自适应
weixin_30687051的博客
12-21 501
页面结构如下： <div class="container"> <div class="left"> left </div> <div class="right"> right </div> </div> 　　需要这样的效果：左右两边...
左右两边div布局
xiaopeng__的专栏
12-06 2749
常用的自适应布局 左边固定右边自适应 _margin-right:-3px;   右边+overflow+zoom
两个左浮动的div，其中一个宽度固定，怎么让另一个宽度自适应
qq_33177908的博客
06-16 538
<div class= "container"> <div class="left"></div> <div class="right"></div> </div> <style> /*方法一： BFC(块级格式化上下文)*/ .container{ width:1000px; height:400px; border: 1px solid red; } .left{ width:200px;height:100%;b
div+css 面试题目
update_158的专栏
05-06 8372
1.超链接访问过后hover样式就不出现的问题?被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A2.IE6的双倍边距BUG例如:浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline3.为什么FF下文本无法撑开容器的高度?标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉he ight设置min-height:200px; 这里为了照顾不认识m
css实现左（右）侧固定宽度，右（左）侧宽度自适应 ---清除浮动
weixin_30315905的博客
10-14 143
老话长谈，css的不固定适应布局 不管是面试还是在平时的工作中，这样的布局形式一直都在用着，很常见，所以今天我就拿出来在唠叨一下， 既是给自己一个备忘存储，也是一个学习巩固的参考，知道大家都会，还是要记忆一下，不为其他，就为打好基础。 话说太多， 直接上代码，一看就能明白。 也许你会不屑一顾的说简单，可是我就喜欢写一些。。。。。。作为一个菜鸟，就要从基础努力学习才行。 方法多种， 你有新的...
div+css面试题目
humingyan的专栏
07-02 700
<br />1.超链接访问过后hover样式就不出现的问题?<br />被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A<br />2.IE6的双倍边距BUG<br />例如:<br /><style type="text/css"> <br />      body {margin:0} <br />      div { float:left; margin-left:10px; width:200px; height:200px; bor
CSS+JavaScript面试题
王成龙的博客
05-02 1556
1、 HTML中定义表格的宽度用80px与80%的区别是什么？px表示像素，%表示占整个页面宽度的百分比。2、 简述DIV元素和SPAN元素的区别。DIV默认情况下是分行显示，SPAN在同行显示。3、 在HTML页面布局中，position的值有哪几种？默认值又是什么？1）position的五种值分别是static, relative, absolute, fixed, inherit2）position的缺省值是static4、 怎样使一个宽为200px和高为200px的层垂直居中于浏览器中?写出CSS样
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值