跳到主要内容

两栏

2023年01月23日
柏拉文
越努力，越幸运

一、Flex 两栏布局​

场景背景: 实现一个左宽为200px, 右宽自适应的两栏布局

场景解决: 通过项目 flex: 1 实现(flex: 1 === flex: 1 1 0)

实时编辑器
function Test(props) {
    const containerStyle = {
            width: '100%',
            height: '300px',
            backgroundColor: 'red',
            display: 'flex',
        }
        const leftStyle = {
            flex: "none", // flex: none === flex: 0 0 auto  不会缩短，也不会伸长
            width: "200px",
            backgroundColor: "yellow"
        }
        const rightStyle = {
            flex: 1,  // flex: 1 === flex: 1 1 0 即会缩短，也会伸长
            backgroundColor: "blue"
        }

        return (
            <div style={ containerStyle }>
                <div style={ leftStyle }></div>
                <div style={ rightStyle }></div>
            </div>
        );
}
结果
Loading...

二、Grid 两栏布局​

场景背景: 实现一个左宽为200px, 右宽自适应的两栏布局

场景解决: 通过 grid-template-columns: 200px auto 实现

实时编辑器
function Test(props) {
    const containerStyle = {
        width: '100%',
        height: '300px',
        backgroundColor: 'red',
        display: 'grid',
        gridTemplateColumns: '200px auto',
    }
    const leftStyle = {
        backgroundColor: "yellow"
    }
    const rightStyle = {
        backgroundColor: "blue"
    }

    return (
        <div style={ containerStyle }>
            <div style={ leftStyle }></div>
            <div style={ rightStyle }></div>
        </div>
    );
}
结果
Loading...

三、Table 两栏布局​

场景背景: 实现一个左宽为200px, 右宽自适应的两栏布局

场景解决: 给父元素设置display: table, 给自适应子元素设置width: 100%; display: table-cell;

实时编辑器
function Test(props) {
    const containerStyle = {
            width: '100%',
            height: '300px',
            display: 'table',
            backgroundColor: 'red',
        }
        const leftStyle = {
            width: "200px",
            height: "100%",
            backgroundColor: "yellow"
        }
        const rightStyle = {
            width: "100%",
            height: "100%",
            display: "table-cell",
            backgroundColor: "blue"
        }

        return (
            <div style={ containerStyle }>
                <div style={ leftStyle }></div>
                <div style={ rightStyle }></div>
            </div>
        );
}
结果
Loading...

四、Float 两栏布局​

4.1 margin-left 方案​

解决方案: 利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。

实时编辑器
function Test(props) {
  const container = {
    width: "600px",
    height: "400px",
    backgroundColor: "red"
  }
  const left = {
    width: "200px",
    height: "100%",
    float: "left",
    backgroundColor: "blue"
  }
  const right = {
    width: "auto",
    height: "100%",
    marginLeft: "200px",
    backgroundColor: "yellow"
  }

  return (
     <div style={ container }>
       <div style={ left }></div>
        <div style={ right }></div>
     </div>
  );
}
结果
Loading...

4.2 overflow BFC 方案​

解决方案: 利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

实时编辑器
function Test(props) {
  const container = {
    width: "600px",
    height: "400px",
    backgroundColor: "red"
  }
  const left = {
    width: "200px",
    height: "100%",
    float: "left",
    backgroundColor: "blue"
  }
  const right = {
    width: "auto",
    height: "100%",
    overflow: "hidden",
    backgroundColor: "yellow"
  }

  return (
     <div style={ container }>
       <div style={ left }></div>
        <div style={ right }></div>
     </div>
  );
}
结果
Loading...

五、position 两栏布局​

5.1 relative 方案​

解决方案: 利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。

实时编辑器
function Test(props) {
  const container = {
    width: "600px",
    height: "400px",
    position: "relative",
    backgroundColor: "red"
  }
  const left = {
    width: "200px",
    height: "100%",
    position: "absolute",
    backgroundColor: "blue"
  }
  const right = {
    width: "auto",
    height: "100%",
    position: "relative",
    left: "200px",
    right: "0px",
    top: "0px",
    bottom: "0px",
    backgroundColor: "yellow"
  }

  return (
     <div style={ container }>
       <div style={ left }></div>
        <div style={ right }></div>
     </div>
  );
}
结果
Loading...

5.2 margin-left 方案​

解决方案: 将父级元素设置为相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。

实时编辑器
function Test(props) {
  const container = {
    width: "600px",
    height: "400px",
    position: "relative",
    backgroundColor: "red"
  }
  const left = {
    width: "200px",
    height: "100%",
    position: "absolute",
    backgroundColor: "blue"
  }
  const right = {
    width: "auto",
    height: "100%",
    marginLeft: "200px",
    backgroundColor: "yellow"
  }

  return (
     <div style={ container }>
       <div style={ left }></div>
        <div style={ right }></div>
     </div>
  );
}
结果
Loading...

参考资料​

「2021」高频前端面试题汇总之CSS篇