javascript - 如何自动对齐网格项目?[购物]
问题描述
如果它们具有不同的内容大小,可以对齐所有网格项???检查下面的我的图片作为示例:
测试站点:https ://strokes-test.myshopify.com/
li.griditems 的代码
<li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
{% include 'product-grid-item', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
</li>
解决方案
添加这个CSS。
.grid--view-items {
overflow: auto;
margin-bottom: -35px;
display: flex;
flex-wrap: wrap;
}
.grid--view-items li.grid__item .products {
height: 100%;
display: flex;
flex-wrap: wrap;
}
.products .product_left {
float: left;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
}
推荐阅读
- java - 线程时钟对象
- minitest - 是否需要在 minitest 中验证模拟
- r - 计算相同长度向量中的连续元素
- php - Laravel 编辑分页下一个和上一个 url 进行过滤
- android - Admob 错误代码 2 - 广告加载失败:2
- wordpress - 在插件中添加 Heartbeat API 的过滤器 - Wordpress
- java - 从 Firebase 实时数据库中检索出勤率
- yaml - 在 yaml 文件中如何将整数转换为字符串
- node.js - 从'express'发送到heroku import express时,nodejs project transfert mac to mac在第二个mac上出错
- git - 如何将我的 git 合并冲突转换为类似 diff 的格式?