css 三栏布局方法

最新推荐文章于 2024-09-22 20:36:19 发布

Eric Coper

最新推荐文章于 2024-09-22 20:36:19 发布

阅读量36

点赞数

分类专栏：工作文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_51644864/article/details/131921696

版权

工作专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章介绍了在CSS中实现三栏布局的四种方法：使用float布局，绝对定位，弹性盒(flex)以及Grid布局。每种方法都有其优缺点，如float和absolute布局可能产生BFC问题或局限性，而flex布局适合移动端且能解决前两者的问题，但Grid布局虽然更便于个性化定制，但学习成本高且兼容性不佳。在不提供元素高度的情况下，只有flex和table布局仍能生效。

摘要由CSDN通过智能技术生成

问题描述：假设⾼度已知，请写出三栏布局，其中左、右栏宽度各为300px，中间⾃适应

float解决方式

  <section class="layout float">
    <style>
      .left {
        float: left;
        width: 300px;
        background-color: yellow;
      }

      .right {
        float: right;
        width: 300px;
        background-color: blue;
      }

      .center {
        background-color: red;
      }
    </style>
    <article>
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <h1>solution of float</h1>
      </div>
    </article>
  </section>

center 必须写在后面，因为浮动元素会脱离文档流，如果写在前面的话right部分会被挤下来，感兴趣的可以试一下。

绝对定位解决方式

  <section class="layout absolute">
    <style>
      .layout.layout.absolute {
        position: relative;
      }

      .layout.absolute .left {
        width: 300px;
        left: 0%;
        top: 0%;
        position: absolute;
        background-color: yellow;
      }

      .layout.absolute .right {
        width: 300px;
        position: absolute;
        right: 0%;
        top: 0%;
        background-color: blue;
      }

      .layout.layout.absolute .center {
        background-color: red;
        position: absolute;
        left: 300px;
        right: 300px;
      }
    </style>

    <article>
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <h1>solution of absolute</h1>
      </div>
    </article>
  </section>

flex解决方式


  <!-- flex解决方式 -->
  <section class="layout flexbox">
    <style>
      .layout.flexbox {
        margin-top: 140px;
      }

      .layout.flexbox .left-center-right {
        display: flex;
      }

      .layout.flexbox .left {
        width: 300px;
        background-color: yellow;
      }

      .layout.flexbox .right {
        width: 300px;
        background-color: blue;
      }

      .layout.flexbox .center {
        flex: 1;
        background-color: red;
      }
    </style>

    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h1>solution of flex</h1>
      </div>
      <div class="right"></div>
    </article>
  </section>

table解决方式

  <!-- table解决方式 -->
  <section class="layout tablebox">
    <style>
      .layout.tablebox .left-center-right {
        display: table;
        width: 100%;
        height: 100px;
      }

      .layout.tablebox .left-center-right div {
        display: table-cell;
      }

      .layout.tablebox .left {
        width: 300px;
        background-color: yellow;
      }

      .layout.tablebox .right {
        width: 300px;
        background-color: blue;
      }

      .layout.tablebox .center {
        flex: 1;
        background-color: red;
      }
    </style>

    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h1>solution of table</h1>
      </div>
      <div class="right"></div>
    </article>
  </section>

Grid布局

  <!-- Grid解决方式 -->
  <section class="layout gridbox">
    <style>
      .layout.gridbox .left-center-right {
        display: grid;
        width: 100%;
        height: 100px;
        grid-template-columns: 300px auto 300px;
      }

      .layout.gridbox .left {
        background-color: yellow;
      }

      .layout.gridbox .right {
        background-color: blue;
      }

      .layout.gridbox .center {
        background-color: red;
      }
    </style>

    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h1>solution of grid</h1>
      </div>
      <div class="right"></div>
    </article>
  </section>

总结

在这里插入图片描述

float布局
优点：兼容性很好，因为float会脱离文档流，如果能够处理好和周围元素的关系的话，还是很好用的
缺点：由于脱离了文档流，会有BFC的问题
absolute定位
**优点：**脱离了文档，不会和周围元素冲突。便捷迅速
缺点：子元素也跟着脱离了文档流，有局限性
flex布局
**优点：**解决了上述两种方法的弊端，尤其适配移动端
**缺点：**无
table布局
**优点：**兼容性好，比如flex布局不兼容IE8
**缺点：**当其中一个元素高度过高后，其他元素也会增高
Grid布局
**优点：**更加方便个性化定制
**缺点：**学习成本较高，兼容性差，很多浏览器不支持
思考：如果不提供元素高度，哪些布局可以生效？
我们采用添加高度的方式查看

可以清除的看到只有flex布局和table布局生效了