在html中将多个div进行多行多列分布时

彩虹海的约定·

已于 2023-04-04 17:01:12 修改

阅读量2k

点赞数 1

文章标签： html Powered by 金山文档

于 2023-03-14 15:50:30 首次发布

本文链接：https://blog.csdn.net/qq_69413049/article/details/129529866

版权

按下图的8个div来说，通过对盒子与每个div宽高的设置，可以将这8个div按四行两列分布；

页面显示图为：

改变盒子的宽高将这8个div按两行四列分布；

代码自行复制修改：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Person</title>
        <style>
        .container {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          width: 520px;
          height: 500px;
          background-color: #00F7DE;
        }
        .one {
          width: 250px;
          height: 40px;
          background-color: #ccc;
          margin: 5px;
        }
        </style>
    </head>
    <body>
        <div class="container">
          <div class="one"></div>
          <div class="one"></div>
          <div class="one"></div>
          <div class="one"></div>
          <div class="one"></div>
          <div class="one"></div>
          <div class="one"></div>
          <div class="one"></div>
          <div class="one"></div>
          <div class="one"></div>
          <div class="one"></div>
          <div class="one"></div>
          <div class="one"></div>
          <div class="one"></div>
          <div class="one"></div>
          <div class="one"></div>
        </div>
            
    </body>
</html>