两列布局（左侧定宽，右侧自适应）

作者: 蜗牛和曼巴 | 来源:发表于2019-10-17 14:46 被阅读0次

常用网页布局
css常见布局面试题集
页面布局
两列布局（左侧定宽，右侧自适应）
css布局
前端常见布局方式
CSS布局
两列布局，左侧固定宽度右侧自适应
多列布局方案
常见网页布局的介绍

01.jpg

方法一：float+margin

<body>
  <div class="left">左侧定宽</div>
  <div class="right">右侧自适应</div>
</body>

  .left{
      width: 100px;
      height: 500px;
      background: pink;
      float: left;
    }
    .right{
      height: 500px;
      background: rebeccapurple;
      margin-left: 100px;
    }

方法二：float+overflow

<body>
  <div class="left">左侧定宽</div>
  <div class="right">右侧自适应</div>
</body>

   .left{
      width: 100px;
      height: 500px;
      background: pink;
      float: left;
    }
    .right{
      height: 500px;
      background: rebeccapurple;
      overflow: hidden;
      /* margin-left: 100px; */
    }

利用浮动脱离标准流。注意清除浮动

方法三：子绝父相定位

<body>
  <div class="box">
  <div class="left">左侧定宽</div>
  <div class="right">右侧自适应</div>
</div>
</body>

  <style>
    .box{
      position: relative;
    }
    .left{
      width: 100px;
      height: 500px;
      background: pink;
      position: absolute;
      left: 0;
      top: 0
    }
    .right{
      height: 500px;
      background: rebeccapurple;
      position: absolute;
      left: 100px;
      right: 0;
      top:0
    }
  </style>

方法四：flex

<body>
  <div class="box">
  <div class="left">左侧定宽</div>
  <div class="right">右侧自适应</div>
</div>
</body>

  <style>
    .box{
      display: flex
    }
    .left{
      width: 100px;
      height: 500px;
      background: pink;
    }
    .right{
      height: 500px;
      background: rebeccapurple;
      flex: 1
    }
  </style>