WordPress店铺页面产品Div统一尺寸与文本对齐的CSS实现问询

核心思路 #

通过CSS Flex布局固定产品容器高度，规范图片显示逻辑避免裁切，同时让产品信息区域自动填充剩余空间，确保底部文本/按钮处于同一水平线。

具体CSS代码 #

/* 统一产品容器高度，用flex布局让内容自动适配 */
.woocommerce ul.products li.product {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 30px; /* 保留产品间间距 */
}

/* 规范图片显示，避免裁切 */
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
    width: 100%;
    height: 250px; /* 可根据需求调整固定高度 */
    object-fit: contain; /* 完整保留图片比例，不裁切 */
    object-position: center; /* 图片居中显示 */
    background-color: #fff; /* 可选：给图片加白色背景，适配透明底产品图 */
}

/* 让产品信息区域自动填充容器剩余空间，底部元素对齐 */
.woocommerce ul.products li.product .product-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 确保价格、按钮等底部元素统一对齐 */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .add_to_cart_button {
    margin-top: auto;
}

使用说明 #

1. 登录WordPress后台，进入「外观」→「自定义」→「额外CSS」
2. 将上述代码粘贴至输入框，点击「发布」即可生效
3. 可根据你的主题布局，调整height: 250px的数值来适配产品图片比例
4. 如果代码中的类名与你的主题不匹配，可通过浏览器开发者工具（F12）查看产品容器、图片、信息区域的实际类名，替换代码中对应的选择器

内容的提问来源于stack exchange，提问作者Montio5