CSS实现9宫格布局的4种方法：flex、float、grid、table布局

最新推荐文章于 2024-09-19 11:57:55 发布

离奇6厘米

最新推荐文章于 2024-09-19 11:57:55 发布

阅读量2.3k

点赞数

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

本文链接：https://blog.csdn.net/vest_er/article/details/128861015

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章展示了使用HTML和CSS实现网页布局的四种常见方法：Flex布局、Grid布局、Float布局和Table布局。每种方法都配有相应的HTML代码和样式，包括颜色块排列和尺寸设置，以直观地呈现不同布局方式的效果。

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

一、实现效果及html代码

1、实现效果

在这里插入图片描述

2、html代码

<body>
    <div class="container">
      <div style="background-color: red">1</div>
      <div style="background-color: blue">2</div>
      <div style="background-color: green">3</div>
      <div style="background-color: pink">4</div>
      <div style="background-color: orange">5</div>
      <div style="background-color: orchid">6</div>
      <div style="background-color: burlywood">7</div>
      <div style="background-color: royalblue">8</div>
      <div style="background-color: coral">9</div>
    </div>
  </body>

二、flex布局实现

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .container div {
    width: 33%;
    text-align: center;
    height: 150px;
  }
</style>

三、float布局实现

<style>
  .container div {
    float: left;
    width: 33%;
    height: 150px;
  }
</style>

四、grid布局实现

<style>
  .container {
    display: grid;
    grid-template-columns: auto auto auto;
  }
  .container div {
    height: 150px;
    text-align: center;
  }
</style>

五、table布局实现
html结构

 <body>
   <div class="container">
     <div class="item">
       <div style="background-color: red">1</div>
       <div style="background-color: blue">2</div>
       <div style="background-color: green">3</div>
     </div>
     <div class="item">
       <div style="background-color: pink">4</div>
       <div style="background-color: orange">5</div>
       <div style="background-color: orchid">6</div>
     </div>
     <div class="item">
       <div style="background-color: burlywood">7</div>
       <div style="background-color: royalblue">8</div>
       <div style="background-color: coral">9</div>
     </div>
   </div>
 </body>

<style>
      .container {
        display: table;
        width: 100%;
        height: 100%;
      }
      .item {
        display: table-row;
      }
      .item div {
        display: table-cell;
        height: 150px;
      }
    </style>