如何包装项目以始终在最后一行至少包含 2 个项目?
P粉023650014
P粉023650014 2023-09-11 16:49:22
0
1
622

图片问题

我的客户当然希望以响应式方式在他的网站上列出车辆。但所有已知的技术(flex、grid)都将最后一个项目包装到下一行。

我尝试用图片做什么

但对于英雄来说,这是极其丑陋的。客户想要:

  • 每行最多 5 项
  • 每行至少 2 项

棘手的部分是项目的数量必须动态。通常在 4 至 6 辆车之间

我知道我可以像这样选择最后两项

.item:nth-last-child(-n+2) {
  order: 2; /* set order to 2 for the last two items */
}

但我不能强迫它们换行。有什么想法吗?

P粉023650014
P粉023650014

全部回复(1)
P粉147045274

原来我必须事先获取项目的数量,并将类注入到列表中来控制显示

<ul class="{{ 'SENARIO_' + numberOfItem + '_ITEMS' }}">

...

.SENARIO_4_ITEMS {
    .container {
        width: 268px;
    }
    @media #{$larger-down} {
        a {
            flex-basis: 50%;
            display: flex;
            justify-content: center;
            .container {
                width: 268px;                   
            }
        }
    }
} 
.SENARIO_5_ITEMS {
    .container {
        width: 270px;
    }
    @media #{$xxlarge-down} {
        a {
            flex-basis: 33%;
            display: flex;
            justify-content: center;
            .container {
                width: 300px;                   
            }
        }
    }
}
.SENARIO_6_ITEMS {
    a {
        flex-basis: 33%;
        display: flex;
        justify-content: center;
        .container {
            width: 300px;                   
        }
    }
    @media #{$xxlarge-down} {
        .container {
            width: 300px;                   
        }
    }
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!