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

最新推荐文章于 2023-11-03 10:30:17 发布

sunyv1

最新推荐文章于 2023-11-03 10:30:17 发布

阅读量6.5k

点赞数 2

分类专栏：前端学习经历文章标签： css3 html 前端

本文链接：https://blog.csdn.net/sunyv1/article/details/108773079

版权

前端学习经历专栏收录该内容

47 篇文章 6 订阅

订阅专栏

一直寻找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

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
前端css卡片card多行排列自适应布局

一直寻找card排列的完美解决方案，之前是用js实现老是会出bug，这里介绍一种纯css实现这里感谢好好叶叶孤城提供的方法先放代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> .test { float: left; width: 25%; box-sizi
复制链接

扫一扫