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

柔情只为你懂 2022-04-14 03:51 406阅读 0赞

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

代码：

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

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

代码如下：

<!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来实现布局。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 2]  
代码如下：

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

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

代码如下：

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

代码：

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

代码如下:

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]: /images/20220414/b55261366d244d1c82f713c08acc9703.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 1]: /images/20220414/c3e0def9a40c4a2c969f3cbc44ea7825.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 2]: /images/20220414/332c4691df6d4ef5b3f1ba1a862f51a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 3]: /images/20220414/e47624d011934dabbe8369cbdef93980.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 4]: /images/20220414/8b3d3fc676fe49239ffd033bae07f9b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 5]: /images/20220414/c7fb1b8049ed4fa5a3b7899706caf2ea.png