追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


两栏布局

2019-11-29 释然 前端及开发文章及欣赏


两列布局的几种方法
html结构
 <div class="content">
      <div class="content-left">
        左侧固定200px
      </div>
      <div class="content-right">
        右侧自适应
      </div>
 </div>

1.通过float和margin-left
 /* 清除浏览器默认边距 */
      * {
        margin: 0;
        padding: 0;
      }

      .content{
        overflow: hidden;
      }
      /* 脱离文档流 */
      .content-left {
        float: left;
        width: 200px;
        height: 200px;
        background: red;
      }

      .content-right {
        /* 通过margin-left将左边位置空出 */
        margin-left: 200px;
        background: blue;
        height: 200px;
      }

2.通过 position: absolute;绝对定位
 /* 清除浏览器默认边距 */
      * {
        margin: 0;
        padding: 0;
      }

      .content {
        overflow: hidden;
        position: relative;
      }
      /* 脱离文档流 */
      .content-left {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background: red;
      }

      .content-right {
        /* 通过margin-left将左边位置空出 */
        margin-left: 200px;
        background: blue;
        height: 200px;
      }

3.通过flex弹性布局
/* 清除浏览器默认边距 */
      * {
        margin: 0;
        padding: 0;
      }

      .content {
        overflow: hidden;
        display: flex;
      }
      .content-left {
          /* 除了width: 200px;还可以flex-basis: 200px; */
        width: 200px;
        height: 200px;
        background: red;
      }

      .content-right {
          /* flex:1;将剩余空间分给它 */
        flex: 1;
        background: blue;
        height: 200px;
      }

4.通过 display: table;表格布局
 /* 清除浏览器默认边距 */
      * {
        margin: 0;
        padding: 0;
      }

      .content {
        overflow: hidden;
        display: table;
        /* 必须给父级定宽不然自适应盒子没定宽只会由内容撑开 */
        width: 100%;
      }
      .content-left {
        display: table-cell;
        width: 200px;
        height: 200px;
        background: red;
      }

      .content-right {
        display: table-cell;
        background: blue;
        height: 200px;
      }

5.通过inline-block和calc()函数
 /* 清除浏览器默认边距 */
      * {
        margin: 0;
        padding: 0;
      }

      .content {
        /* 必须加font-size=0;把inline-block默认间距去掉,
        不过设置后里面文字不显示了可以给里面块设置font-size:20px;
        或者把两个块之间的换行删掉也能去掉间距*/
        font-size: 0;
        overflow: hidden;
      }
      .content-left {
        font-size: 20px;
        display: inline-block;
        width: 200px;
        height: 200px;
        background: red;
      }

      .content-right {
        font-size: 20px;
        display: inline-block;
        background: blue;
        height: 200px;
        /* 注意calc里的运算符两边要有空格 */
        width: calc(100% - 200px);
      }

6.通过float和calc()函数,左右两块都要浮动
 /* 清除浏览器默认边距 */
      * {
        margin: 0;
        padding: 0;
      }

      .content {
        overflow: hidden;
      }
      .content-left {
        float: left;
        width: 200px;
        height: 200px;
        background: red;
      }
      .content-right {
        float: left;
        background: blue;
        height: 200px;
        /* 注意calc里的运算符两边要有空格 */
        width: calc(100% - 200px);
      }

7.使用grid布局
 /* 清除浏览器默认边距 */
      * {
        margin: 0;
        padding: 0;
      }

      .content {
        overflow: hidden;
        display: grid;
        grid-template-columns: 200px 1fr;
        /* grid布局也有列等高的默认效果。需要设置: align-items: start;。 */
        align-items: start;
      }
      .content-left {
        height: 200px;
        background: red;
        /* grid布局还有一个值得注意的小地方和flex不同:在使用margin-left的时候,
        grid布局默认是box-sizing设置的盒宽度之间的位置。
        而flex则是使用两个div的border或者padding外侧之间的距离。 */
        box-sizing: border-box;
        grid-column: 1;
      }
      .content-right {
        background: blue;
        height: 200px;
        box-sizing: border-box;
        grid-column: 2;
      }



标签: 两栏布局 « 一个 npm 包的坎坷“续命”之生 | 双11大屏——情绪的超级机器»


订阅Rss