flex布局最后一行左对齐（个人笔记）

最新推荐文章于 2024-01-25 11:32:45 发布

追寻着星星的方向

最新推荐文章于 2024-01-25 11:32:45 发布

阅读量261

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_44408123/article/details/104279351

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

方法一：

/* 相同数量的i元素（高度为0），设置相同跨度 */

.box::after {
        content: "";
        width: 30%;
        display: block;
        height: 0;
      }
      .div {
        flex: 0 0 30%;
        margin: 10px 0;
        height: 100px;
        border: 1px solid blue;
      }
      i {
        width: 30%;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="div"></div>
      <div class="div"></div>
      <div class="div"></div>
      <div class="div"></div>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>

方法二：
grid布局

优惠劵

追寻着星星的方向

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex布局最后一行左对齐（个人笔记）

方法一：/* 相同数量的i元素（高度为0），设置相同跨度 */.box::after { content: ""; width: 30%; display: block; height: 0; } .div { flex: 0 0 30%; margin: 10px 0;...
复制链接

扫一扫