两栏布局/三栏布局CSS-优快云博客

本文链接：https://blog.youkuaiyun.com/Tian_std_scu/article/details/138220907

首先是两栏布局

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>两栏布局</title>
    <style>
      /* 为父级元素添加BFC */
      .box {
        overflow: hidden;
      }
      .left{
        float: left;
        width: 210px;
        height: 400px;
        background-color: lightblue; /* 为了可视化效果添加背景色 */
      }
      .right{
        margin-left: 210px;
        background-color: lightgray; /* 为了可视化效果添加背景色 */
        height: 200px 
      }
    </style>
  </head>
  
  <body>
    <div class="box">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title>两栏布局_flex</title>
  <style>
    .box {
      display: flex;
      /* 
        flex 容器的一个默认属性值: align-items: stretch;这个属性导致了列等高的效果。 
        为了让两个盒子高度自动，需要设置: align-items: flex-start，
        -- 通过设置 align-items: flex-start，你可以让两个盒子的高度根据其内容自动调整，而不会受到容器最大高度的限制。
      */
    }
    .left {
      flex: 1;
      height: 20px;
      background-color: lightblue;
    }
    .right {
      flex: 2;
      background-color: lightgreen;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
</html>

三栏布局

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>三栏布局_float</title>
    <style>
      /* 为父级元素添加BFC */
      /* .box {
        background: #eee;
        overflow: hidden;
      }
      .left{
        float: left;
        width: 300px;
        height: 400px;
        background-color: lightblue;
      }
      .middle{
        margin-left: 310px;
        margin-right: 310px;
        height: 400px;
        width: calc(100% - 620px);
        background-color: lightpink;
      }
      .right{
        float: right;
        width: 300px;
        height: 400px;
        background-color: lightgreen;
      } */

      /* flex布局 */
      .box{
        display: flex;
        background-color: #e6e6e6;
      }
      .left,
      .middle,
      .right{
        height: 100px;
        flex: 1
      }
      .left{
        background-color: aquamarine;
        /* flex: 2 */
      }
      .middle{
        background-color: lightblue;
      }
      .right{
        background-color: bisque;
      }
      

      /* Grid布局 */
      /* .box{ */
        /* 
          300px：这是第一列的宽度。它的宽度被设置为固定的 300px。
          auto：这是第二列的宽度。auto 值表示第二列的宽度会自动填充剩余的可用空间。
          300px：这是第三列的宽度。与第一列类似，它的宽度被设置为固定的 300px。  */
        /* display: grid;
        width: 100%;
        grid-template-columns: 300px auto 300px;
        
      } */
      /* .left,
      .middle,
      .right{
        height: 100px;
      }
      .left{
        background-color: aquamarine;
      }
      .middle{
        background-color: lightblue;
      } 
      .right{
        background-color: bisque;
      } */
      
    </style>
  </head>
  
  <body>
    <div class="box">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
  </body>
</html>