三栏布局的几种实现方法

酱籽
181 阅读4分钟
  1. 弹性盒模型
 <style>
    /* 弹性布局 */
    body {
      margin: 0;
    }
    section {
      height: 500px;
      display: flex;
    }
    .left {
      width: 100px;
      height: 100%;
      background: palegoldenrod;
    }
    .center {
      flex: 1;
      background: peachpuff;
    }
    .right {
      width: 100px;
      height: 100%;
      background: paleturquoise;
    }
  </style>
  
  <section>
    <div class="left">这里是left部分这里是left部分这里是left部分这里是left部分这里是left部分这里是left部分这里是left部分这里是left部分</div>
    <div class="center">这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center</div>
    <div class="right">这里是right这里是right这里是right这里是right这里是right这里是right这里是right这里是right这里是right</div>
  </section>

  1. float布局

    这里注意浮动的问题，float未脱离文本流，absolute脱离的文本流。

    center的宽度占满了100vw，而文字受float的影响显示宽度为 100vw - 600px

<style>
    body {
      margin: 0;
    }
    .left {
      width: 300px;
      float: left;
      background: palegoldenrod;
    }
    .center {
      background: peachpuff;
    }
    .right {
      width: 300px;
      float: right;
      background: paleturquoise;
    }
</style>  
    
  <!--right需要放在center之前，否则right将会被挤到下面-->
  <section>
    <div class="left">这里是left部分这里是left部分这里是left部分这里是left部分这里是left部分这里是left部分这里是left部分这里是left部分</div>
    <div class="right">这里是right这里是right这里是right这里是right这里是right这里是right这里是right这里是right这里是right</div>
    <div class="center">这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center</div>
  </section>
  1. grid布局
<style>
    body {
      margin: 0;
    }
    section {
      display: grid;
      grid-template-columns:300px 1fr 300px;
    }
    .left {
      background: palegoldenrod;
    }
    .center {
      background: peachpuff;
    }
    .right {
      background: paleturquoise;
    } 
</style>

<section>
    <div class="left">这里是left部分这里是left部分这里是left部分这里是left部分这里是left部分这里是left部分这里是left部分这里是left部分</div>
    <div class="center">这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center</div>
    <div class="right">这里是right这里是right这里是right这里是right这里是right这里是right这里是right这里是right这里是right</div>
</section>
  1. absolute
<style>
    body {
      margin: 0;
    }
    section {
      position: relative;
    }
    .left {
      background: palegoldenrod;
      width: 300px;
      position: absolute;
    }
    .center {
      background: peachpuff;
      position: absolute;
      left: 300px;
      width: calc(100vw - 600px)
    }
    .right {
      background: paleturquoise;
      width: 300px;
      position: absolute;
      right: 0;
    }
</style>

<section>
    <div class="left">1这里是left部分这里是left部分这里是left部分这里是left部分这里是left部分这里是left部分这里是left部分这里是left部分</div>
    <div class="center">1这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center</div>
    <div class="right">1这里是right这里是right这里是right这里是right这里是right这里是right这里是right这里是right这里是right</div>
</section>
  1. table
<style>
    body {
      margin: 0;
    }
    section {
      display: table;
    }
    div {
      display: table-cell;
    }
    .left {
      background: palegoldenrod;
      width: 300px;
    }
    .center {
      background: peachpuff;
    }
    .right {
      background: paleturquoise;
      width: 300px;
    } 
</style>

 <section>
    <div class="left">1这里是left部分这里是left部分这里是left部分这里是left部分这里是left部分这里是left部分这里是left部分这里是left部分</div>
    <div class="center">1这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center这里是center</div>
    <div class="right">1这里是right这里是right这里是right这里是right这里是right这里是right这里是right这里是right这里是right</div>
</section>
avatar
文章
阅读
粉丝