二栏布局之左侧固定右侧自适应布局方案

作者: 阿古瓜 | 来源:发表于2018-03-22 13:51 被阅读0次

常用网页布局
常见网页布局的介绍
两列布局，左侧固定宽度右侧自适应
多列布局方案
2019-04-01常见布局汇总（flex版本）
双栏式布局
两栏布局
CSS常用布局方案
两栏布局和三栏布局
CSS自适应布局

1.png

<!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>Document</title>
  <style media="screen">
    body {
      margin: 0;
      padding: 0;
    }
    .left {
      height: 100px;
      background-color: pink;
    }
    .main {
      height: 100px;
      background-color: #5fcfcd;
    }
    .layout {
      margin: 10px 0;
       border: 5px solid grey;
    }
  </style>
</head>
<body>
  <section class="layout float">
    <!-- 浮动布局方案 -->
    <style type="text/css">
      .layout.float .page {
        zoom: 1;
      }
      .layout.float .page::after {
        content: '';
        display: block;
        clear: both;
      }
      .layout.float .left {
        float: left;
        width: 150px;
        margin-right: 10px;
      }
      .layout.float .main {
        overflow: auto;
      }
    </style>
    <article class="page">
      <div class="left">浮云布局--左侧固定内容框</div>
      <div class="main">浮云布局--右侧自适应内容框</div>
    </article>
  </section>


  <section class="layout absolute">
    <!-- 绝对定位布局
      最大缺陷： 父级高度无法撑开；
   -->
    <style type="text/css">
      .layout.absolute .page {
        position: relative;
      }
      .layout.absolute .left {
        position: absolute;
        width: 150px;
      }
      .layout.absolute .main {
        position: absolute;
        left: 160px;
        right: 0;
      }
    </style>
    <article class="page">
      <div class="left">绝对定位布局--左侧固定内容框</div>
      <div class="main">绝对定位布局--右侧自适应内容框</div>
    </article>
  </section>


  <section class="layout flex" style="margin-top:110px;">
    <!-- flex 布局方案 -->
    <style type="text/css">
      .layout.flex .page {
        display: flex;
      }
      .layout.flex .left {
        flex-basis: 150px;
      }
      .layout.flex .main {
        flex: 1;
      }
    </style>
    <article class="page">
      <div class="left">flex布局--左侧固定内容框</div>
      <div class="main">flex布局--右侧自适应内容框</div>
    </article>

  </section>

  <section class="layout table">
    <!-- table布局布局方案 -->
    <style type="text/css">
      .layout.table .page {
        display: table;
        width: 100%;
      }
      .layout.table .left {
        display: table-cell;
        width: 150px;
      }
      .layout.table .main {
        display: table-cell;
      }
    </style>

    <article class="page">
      <div class="left">table布局--左侧固定内容框</div>
      <div class="main">table布局--右侧自适应内容框</div>
    </article>
  </section>

  <section class="layout grid">
    <!-- grid布局方案 -->
    <style type="text/css">
      .layout.grid .page {
        display: grid;
        grid-template-columns: 150px auto;
      }
    </style>
    <article class="page">
      <div class="left">grid布局--左侧固定内容框</div>
      <div class="main">grid布局--右侧自适应内容框</div>
    </article>
  </section>
</body>
</html>