01-三栏布局

问题描述
解决方案or思路
具体代码
各个方法的优缺点
拓展问题

问题描述

假设高度已知，写一个三栏布局，左右各200px,中间宽度自适应

解决方案or思路

浮动
绝对定位
flex-box布局
网格grid布局
表格布局tab-cell的使用
具体代码
浮动定位

    <div class="container1">
        <div class="left">左边200</div>
        <div class="right">右边200</div>
        <div class="center">中间自适应</div>
    </div>

.container1{
    div{
        height: 100px;
    }
    .left{
        background: red;
        width: 200px;
        float: left;;
    }
    .right{
        background: yellow;
        width: 200px;
        float: right;
    }
    .center{
        background: green;
    }
}

绝对定位

    <div class="container2">
        <div class="left">左边200绝对定位</div>
        <div class="center">中间自适应-绝对定位</div>
        <div class="right">右边200绝对定位</div>
    </div>

.container2{
    position: relative;
    div{
        height: 100px;
        position: absolute;
    }
    .left{
        background: yellow;
        left: 0;
        width: 200px;
    }
    .right{
        background: red;
        right: 0;
        width: 200px;
    }
    .center{
        background: cyan;
        left: 200px;
        right: 200px;
    }
}

flex布局

    <div class="container3">
        <div class="left">左边200flex</div>
        <div class="center">中间自适应-flex</div>
        <div class="right">右边200flex</div>
    </div>

.container3{
    margin-top: 200px;
    display: flex;
    div{
        height: 100px;
    }
    .left{
        background: yellow;
        width: 200px;
    }
    .right{
        background: red;
        width: 200px;
    }
    .center{
        background: cyan;
        flex:1;
    }
}

网格布局

    <div class="container5">
            <div class="left">左边200grid</div>
            <div class="center">中间自适应-grid</div>
            <div class="right">右边200grid</div>
    </div>

.container5{
    margin-top: 30px;
    width: 100%;
    display: grid;
    grid-template-rows:100px;
    grid-template-columns: 200px auto 200px;
    div{
        height: 100px;
    }
    .left{
        background: yellow;
        width: 200px;
    }
    .right{
        background: red;
        width: 200px;
    }
    .center{
        background: cyan;
    }
}

表格布局

    <div class="container4">
            <div class="left">左边200table</div>
            <div class="center">中间自适应-table</div>
            <div class="right">右边200table</div>
    </div>

.container4{
    margin-top: 30px;
    width: 100%;
    display: table;
    div{
        height: 100px;
        display: table-cell;
    }
    .left{
        background: yellow;
        width: 200px;
    }
    .right{
        background: red;
        width: 200px;
    }
    .center{
        background: cyan;
    }
}

各个方法的优缺点

方法	优势	劣势	去掉高度已知后的适用性
浮动	兼容性较好	需要清除浮动以及处理好浮动元素周围的元素之间的关系	否
绝对定位	快捷不易出问题	所有的子元素会脱离文档流，可使用性较差	否
flex布局	比较完美，尤其是在移动端更为方便	备注：css3属性	是
表格布局	兼容性好，可作为flex的补充（ie8）	当某个单元格高度超出的时候，其他单元格会自动增高	是
网格布局（新）	css开始支持，同任务代码更简单		否

拓展问题

垂直三栏布局，两边定高，中间自适应（网格 flex 绝对定位目前可实现）

  <div class="container">
      <div class="top">上200</div>
      <div class="middle">中间自适应</div>
      <div class="bottom">下200</div>
  </div>

flexbox布局：当高度不足400的时候，定高会同时缩小

.container{
  height: 100%;
  display: flex;
  flex-direction: column;
  div{
      width: 100px;
        min-height:100px;
  }
  .top{
      background: red;
      height: 200px;
  }
  .middle{
      background: orange;
      flex: 1;
  }
  .bottom{
      background: green;
      height: 200px;
  }
}

绝对定位

.container{
    height: 100%;
    div{
        width: 100px;
          position:absolute;
    }
    .top{
        background: red;
        height: 200px;
          top:0;
    }
    .middle{
        background: orange;
        top:200px;
          bottom:200px;
    }
    .bottom{
        background: green;
        height: 200px;
          bottom:0
    }
}

表格布局(在元素外部包裹一层显示为tab-row,真实元素显示tab-cell)

.container{
    height: 100%;
    display: flex;
    flex-direction: column;
    div{
        width: 100px;
    }
    .top{
        background: red;
        height: 200px;
    }
    .middle{
        background: orange;
        flex: 1;
    }
    .bottom{
        background: green;
        height: 200px;
    }
}

网格布局

.container4{
    height: 100%;
    display: grid;
    grid-template-rows: 200px auto 200px;
    grid-template-columns: auto;
    div{
        width: 100px;
    }
    .top{
        background: red;
    }
    .middle{
        background: orange;
    }
    .bottom{
        background: green;
    }
}

两栏布局

    <div class="container">
        <div class="left">左邊300</div>
        <div class="right">右邊自適應</div>
    </div>

浮动

.container{
    div{
        height: 200px;
    }
    .left{
        float: left;
        width: 300px;
        background: red;
    }
    .right{
        background: green;
    }
}

flex布局

.container{
    display: flex;
    div{
        height: 200px;
    }
    .left{
        width: 300px;
        background: red;
    }
    .right{
        background: green;
        flex:1;
    }
}

网格布局

.container{
    display: grid;
    grid-template-columns: 100px auto;
    grid-template-rows: 200px;
    div{
        // height: 200px;
    }
    .left{
        background: red;
    }
    .right{
        background: green;
    }
}

绝对定位

.container{
    width: 100%;
    position: relative;
    div{
        height: 200px;
        position: absolute;
    }
    .left{
        background: red;
        left: 0;
        width: 200px;
    }
    .right{
        background: green;
        left: 200px;
        width: 100%;//或者设置right为0
    }
}

表格布局

.container{
    width: 100%;//必须设置
    display: table;
    div{
        height: 100px;  
    }
    .left{
        background: red;
        width: 200px;
        display: table-cell;
    }
    .right{
        background: green;
        display: table-cell;
    }
}

问题描述

解决方案or思路

具体代码

各个方法的优缺点

拓展问题