zoukankan      html  css  js  c++  java
  • CSS实现两栏布局

    两栏布局左侧固定宽度,右侧自适应

    先看一下页面布局:

      <div class="wrap">
        <div class="left">
          左侧固定内容
        </div>
        <div class="right">
          右侧内容自适应
        </div>
      </div>

    1.float

    <style>
        /* 清除浏览器默认边距 */
        * {
          margin: 0;
          padding: 0;
        }
        .wrap {
          overflow: hidden;
          border: 1px solid red;
        }
        /* 脱离文档流 */
        .left {
          float: left;
          width: 200px;
          height: 200px;
          background: purple;
        }
        .right {
          margin-left: 200px;
          background: skyblue;
          height: 200px;
        }
      </style>

    2.使用绝对定位实现—absolute

      <style>
        /* 清除浏览器默认边距 */
        * {
          margin: 0;
          padding: 0;
        }
        .wrap {
          overflow: hidden;
          position: relative;
        }
        /* 脱离文档流 */
        .left {
          position: absolute;
          left: 0;
          top: 0;
          width: 200px;
          height: 200px;
          background: purple;
        }
        .right {
          margin-left: 200px;
          background: skyblue;
          height: 200px;
        }
      </style>

    3.使用表格布局—table

      <style>
        /* 清除浏览器默认边距 */
        * {
          margin: 0;
          padding: 0;
        }
        /* 表格布局 */
        .wrap {
          display: table;
          width: 100%;
        }
        .left {
          display: table-cell;
          width: 200px;
          height: 200px;
          background: purple;
        }
        .right {
          display: table-cell;
          background: skyblue;
          height: 200px;
        }
      </style>

    4.使用calc函数

      <style>
        /* 清除浏览器默认边距 */
        * {
          margin: 0;
          padding: 0;
        }
        /* 双float */
        .wrap {
          overflow: hidden;
        }
        .left {
          float: left;
          width: 200px;
          height: 200px;
          background: purple;
        }
        .right {
          float: left;
          background: skyblue;
          height: 200px;
          width: calc(100% - 200px);
        }
      </style>

    5.使用inline-block和calc()函数

      <style>
        /* 清除浏览器默认边距 */
        * {
          margin: 0;
          padding: 0;
        }
        /* 双float */
        .wrap {
          overflow: hidden;
          width: 100%;
          font-size: 0;
        }
        .left {
          display: inline-block;
          width: 200px;
          height: 200px;
          background: purple;
          font-size: 20px;
        }
        .right {
          display: inline-block;
          background: skyblue;
          height: 200px;
          width: calc(100% - 200px);
          font-size: 20px;
        }
      </style>

    6.使用弹性布局—flex

     <style>
        /* 清除浏览器默认边距 */
        * {
          margin: 0;
          padding: 0;
        }
        .wrap {
          display: flex;
        }
        .left {
          height: 200px;
          background: purple;
          width:100px;
        }
        .right {
          background: skyblue;
          height: 200px;
          flex: 1;
        }
      </style>
  • 相关阅读:
    一本通1331后缀表达式的值
    一本通1198 逆波兰表达式
    一本通1311 求逆序对(归并排序应用)
    快速排序
    一本通1310 车厢重组(冒泡排序,类似逆序对)
    一本通1186 出现次数超过一半的数(类似桶排序)
    一本通1216 红与黑 (代码没有参考任何博客,完全是自己写的,我搜索出山了!!!)
    一本通1222 放苹果
    一本通 1212 LETTERS
    一本通1215 迷宫
  • 原文地址:https://www.cnblogs.com/yaya-003/p/12673428.html
Copyright © 2011-2022 走看看