左右两栏布局实现

Posted 2022-02-16 我是格鲁特

在前端面试中，经常会被问到两栏布局问题，即左栏宽度固定，右栏占满剩余空间。

 

 常见的实现方法有以下几种，最后一种不推荐：

1. 对容器元素使用flex布局，然后右侧子容器使用flex-grow:1

2. 可以采用position的相关属性，配合cacl来实现。

.wrapper
    position: relative;

.left
    width: 200px;
    height: 200px;
    background-color: green;

.right
    position: absolute;
    top:0;
    left:200px;
    width: calc(100% - 200px);
    box-sizing: border-box;        

 

3. 左侧使用float:left，右侧设置margin-left，margin-left的值为左侧的宽度

4. 左右侧的元素都使用display:inline-block，然后右侧元素的width使用calc(100% - 左侧宽度)，多个inline-block元素并排时会产生空白间隙，如下图所示：

 要解决该问题，需要在父元素上设置两个css，如下

.wrapper
font-size: 0 /*chrome下无效，因为chrome支持的最小字体为12号;在IE6/7下残留1像素间隙*/
letter-spacing: -3px; /*负值可以去除所有浏览器的换行符间隙，但是，Opera浏览器下极限是间隙1像素，0像素会反弹，换行符间隙还原*/