博客

前端css卡片card多行排列自适应布局

  • Post author:
  • Post category:其他




一直寻找card排列的完美解决方案，之前是用js实现老是会出bug，这里介绍一种纯css实现

这里感谢好

好叶叶孤城

提供的方法

先放代码 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .test {
      float: left;
      width: 25%;
      box-sizing: border-box;
      padding: 10px;
      min-width: 150px;
    }
    .container {
      width: 100%;
    }
    @media (max-width:615px) {
      .test {
        float: left;
        width: 33%;
        box-sizing: border-box;
        padding: 10px;
        min-width: 150px;
      }
    }
    @media (max-width:465px) {
      .test {
        float: left;
        width: 50%;
        box-sizing: border-box;
        padding: 10px;
        min-width: 150px;
      }
    }
    @media (max-width:315px) {
      .test {
        float: left;
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="test">
      <img src="./640.webp" style="max-width: 100%;" />
    </div>
    <div class="test">
      <img src="./640.webp" style="max-width: 100%;" />
    </div>
    <div class="test">
      <img src="./640.webp" style="max-width: 100%;" />
    </div>
    <div class="test">
      <img src="./640.webp" style="max-width: 100%;" />
    </div>
  </div>
</body>
</html>

再放效果


一行


在这里插入图片描述


第二行


在这里插入图片描述



下面是说明，不需要的可以不看了

1、用到的技术是响应式布局（就是监听页面宽度实现不同变化）

2、这里用的是float，当然用flex也是一样的

3、其实不是完美的，比如三个一排的时候是33%，所以还剩下1%在最后面，不影响大局

4、@media中的max-width值得由来：

比如这里设置的每个元素的最小宽度是150px，也就是再低于这个值就会换行，

当有四个换到三个的临界值是 150 * 4 = 600 。也就是说再小就要换行了，这个时候我们主动换行，比如上面的在615的时候就把宽度设置为33%，这样就提前完成转换，实现完美衔接。

同理三到二就是 150 * 3 = 450 。提前15px 就是 465；其它同理

5、这里计算的宽度是浏览器可视范围的宽度，所有计算上面值得时候要加上其它布局的宽度。


版权声明：本文为sunyv1原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。