五种方式实现左右两栏固定宽度中间自适应

最新推荐文章于 2021-04-01 21:37:07 发布

weixin_30608503

最新推荐文章于 2021-04-01 21:37:07 发布

阅读量321

点赞数

文章标签：开发工具

原文链接：http://www.cnblogs.com/wzp-monkey/p/10481113.html

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>页面布局</title>
  <style>
    html * {
      margin:0px;
      padding:0px;
    }
  </style>
</head>

<body>
  <!--float布局-->
  <section>
    <style>
      .layout-float {
        margin-bottom:10px;
      }
      .layout-float > div{
        height:100px;
      }
      .left {
        float:left;
        width:300px;
        background: red;
      }
      .right {
        float:right;
        width:300px;
        background: blue;
      }
      .middle {
        background: yellow;
      }
    </style>
    <article class="layout-float">
      <div class="left"></div>
      <div class="right"></div>
      <div class="middle">float的三栏布局</div>
    </article>
  </section>
  <!--绝对定位-->
  <section>
      <style>
        .layout-position > div{
          height:100px;
          position:absolute;
        }
        .left {
          left:0;
          width:300px;
          background: red;
        }
        .middle {
          left:300px;
          right:300px;
          background: yellow;
        }
        .right {
          right:0px;
          width:300px;
          background: blue;
        }
      </style>
      <article class="layout-position">
        <div class="left"></div>
        <div class="middle">position的三栏布局</div>
        <div class="right"></div>
      </article>
    </section>
    <!--flex布局-->
    <section>
        <style>
          .layout-flex {
            height:100px;
            display:flex;
            margin-top:120px;
          }
          .left {
            width:300px;
            background: red;
          }
          .middle {
            flex:1;
            background: yellow;
          }
          .right {
            width:300px;
            background: blue;
          }
        </style>
        <article class="layout-flex">
          <div class="left"></div>
          <div class="middle">flex的三栏布局</div>
          <div class="right"></div>
        </article>
      </section>
    <!--grid布局-->
    <section>
        <style>
          .layout-grid {
            display:grid;
            width:100%;
            grid-template-rows:100px;
            grid-template-columns: 300px auto 300px;
            margin-top:10px;
          }
          .left {
            background: red;
          }
          .middle {
            background: yellow;
          }
          .right {
            background: blue;
          }
        </style>
        <article class="layout-grid">
          <div class="left"></div>
          <div class="middle">grid的三栏布局</div>
          <div class="right"></div>
        </article>
      </section>
</body>

</html>

转载于:https://www.cnblogs.com/wzp-monkey/p/10481113.html