经典布局

记录几种布局

圣杯布局

html

<div class='container'>
    <div class='middle'>middle</div>
    <div class='left'>left</div>
    <div class='right'>right</div>
</div>

css

.container {
        padding: 0 200px
    }

    .middle {
        width: 100%;
        background: red;
        min-height: 200px;
        float: left;

    }

    .left,
    .right {
        width: 200px;
        min-height: 200px;
        float: left;

    }

    .left {
        background: green;
        margin-left: -100%;
        position: relative;
        left: -200px;

    }

    .right {
        background: yellow;
        margin-left: -200px;
        position: relative;
        right: -200px;
    }

效果

双飞翼布局

html

<div class='container2'>
    <div class='middle2'>
        <div class='inner'>middle</div>
    </div>
    <div class='left2'>left</div>


    <div class='right2'>right</div>
</div>

css

.middle2 {
      width: 100%;
      background: red;
      min-height: 200px;
      float: left;

  }

  .middle2 .inner {
      height: 200px;
      border: 1px solid red;
      margin-top: 10px;

      /* 以下是设置的 margin */
      margin-left: 200px;
      margin-right: 200px;
  }

  .left2,
  .right2 {
      width: 200px;
      min-height: 200px;
      float: left;

  }

  .left2 {
      background: green;
      margin-left: -100%;

  }

  .right2 {
      background: yellow;
      margin-left: -200px;
  }

Calc

.center{
  width:calc(100% - 400px)
}

flex 布局

.container{
    display:flex;
    justify-content:space-between;
}
.left,.right{
    flex:0 0 200px;
    height:100%;
}
.center{
    flex:1
}

position

.container{
   position:relative;
   height:200px
}
.left,.right{
    position:absolute;
    width:200px;
    height:200px;
}
.left{
    left:0
}
.right{
    right：0
}
.center{
    position:absolute；
    left:200px;
    right:200px;
    height:100px;
}