javascript - 等高列商店页面（图片、标题、价格等）
问题描述
我有一个使用 WordPress 和 WooCommerce 构建的在线商店。我正在使用 OceanWP Theme 和 Elementor 来构建我的页面。
实际上，我非常擅长 css、flexbox 和网格。但是，我不知道如何解决以下问题：
在我的商店页面上，我有一个产品网格列表。但是由于标题的长度不同以及徽章或特价等其他一些功能，产品没有垂直对齐。例如，产品按钮以不同的高度结束。
我的目标是让图像、标题、价格、按钮等在同一高度垂直对齐。我认为这不适用于 flexbox，因为使用 flexbox，我可以放大或缩小思考并在顶部或底部对齐完整的 flexbox。
但是如何将所有元素（图像、标题等）对齐在同一高度上？我用网格做这个吗？
<link href="https://pagecdn.io/theme/wp-oceanwp/1.8.6/assets/css/woo/woocommerce.css" rel="stylesheet" crossorigin="anonymous" >
<link href="https://pagecdn.io/plugin/wp-elementor/3.0.15/assets/css/frontend.css" rel="stylesheet" crossorigin="anonymous" >
<link href="https://pagecdn.io/theme/wp-oceanwp/1.8.6/assets/css/style.css" rel="stylesheet" crossorigin="anonymous" >
<div class="woocommerce columns-4 ">
<ul class="products oceanwp-row clr grid">
<li class="entry has-media has-product-nav col span_1_of_4 owp-content-center owp-thumbs-layout-horizontal owp-btn-normal owp-tabs-layout-horizontal product type-product post-830 status-publish first instock product_cat-jacken product_cat-outdoor has-post-thumbnail post-password-protected taxable shipping-taxable purchasable product-type-simple">
<div class="product-inner clr">
<div class="woo-entry-image-swap woo-entry-image clr">
<a href="https://google.de" class="woocommerce-LoopProduct-link no-lightbox"><img src="https://picsum.photos/300/300" class="woo-entry-image-main" width="300" height="300"></a>
</div>
<!-- .woo-entry-image-swap -->
<ul class="woo-entry-inner clr">
<li class="image-wrap">
<div class="woo-entry-image-swap woo-entry-image clr">
<a href="https://google.de" class="woocommerce-LoopProduct-link no-lightbox"><img src="https://picsum.photos/300/300" class="woo-entry-image-main" width="300" height="300"></a>
</div>
<!-- .woo-entry-image-swap -->
</li>
<li class="category"><a href="https://google.de" rel="tag">Jacken</a>, <a href="https://google.de" rel="tag">Outdoor</a></li>
<li class="title">
<h2><a href="https://google.de">Geschützt: ISG Jacket Multicam (Kopie) This is a test This is a test</a></h2>
</li>
<li class="price-wrap">
<span class="price"><span class="woocommerce-Price-amount amount"><bdi>1.188,81 <span class="woocommerce-Price-currencySymbol">€</span></bdi></span></span>
</li>
<li class="wc-gzd">
<p class="wc-gzd-additional-info tax-info">inkl. 19 % MwSt.</p>
<p class="wc-gzd-additional-info shipping-costs-info">zzgl. <a href="https://google.de" target="_blank">Versandkosten</a></p>
</li>
<li class="rating"></li>
<li class="btn-wrap clr"><a href="?add-to-cart=830" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="830" data-product_sku="" aria-label="„ISG Jacket Multicam (Kopie)“ zu deinem Warenkorb hinzufügen" rel="nofollow">In den Warenkorb</a></li>
</ul>
</div>
<!-- .product-inner .clr -->
</li>
<li class="entry has-media has-product-nav col span_1_of_4 owp-content-center owp-thumbs-layout-horizontal owp-btn-normal owp-tabs-layout-horizontal product type-product post-585 status-publish instock product_cat-ausruestung product_cat-outdoor has-post-thumbnail taxable shipping-taxable purchasable product-type-variable">
<div class="product-inner clr">
<div class="woo-entry-image-swap woo-entry-image clr">
<a href="https://google.de" class="woocommerce-LoopProduct-link no-lightbox"><img src="https://picsum.photos/300/300" class="woo-entry-image-main" width="300" height="300"></a>
</div>
<!-- .woo-entry-image-swap -->
<ul class="woo-entry-inner clr">
<li class="image-wrap">
<div class="woo-entry-image-swap woo-entry-image clr">
<a href="https://google.de" class="woocommerce-LoopProduct-link no-lightbox"><img src="https://picsum.photos/300/300" class="woo-entry-image-main" width="300" height="300"></a>
</div>
<!-- .woo-entry-image-swap -->
</li>
<li class="category"><a href="https://google.de" rel="tag">Ausrüstung</a>, <a href="https://google.de" rel="tag">Outdoor</a></li>
<li class="title">
<h2><a href="https://google.de">Wilderness .x-navbar-inner superiörrrrr geil</a></h2>
</li>
<li class="price-wrap">
<span class="price"><span class="woocommerce-Price-amount amount"><bdi>357,00 <span class="woocommerce-Price-currencySymbol">€</span></bdi></span></span>
</li>
<li class="wc-gzd">
<p class="wc-gzd-additional-info tax-info">inkl. MwSt.</p>
<p class="wc-gzd-additional-info shipping-costs-info">zzgl. <a href="https://google.de" target="_blank">Versandkosten</a></p>
<p class="wc-gzd-additional-info delivery-time-info"></p>
<p class="wc-gzd-additional-info product-units-wrapper product-units"></p>
</li>
<li class="rating"></li>
<li class="btn-wrap clr"><a href="https://google.de" data-quantity="1" class="button product_type_variable add_to_cart_button" data-product_id="585" data-product_sku="" aria-label="Wähle Optionen für „Wilderness .x-navbar-inner superiörrrrr geil“" rel="nofollow">Ausführung wählen</a></li>
</ul>
</div>
<!-- .product-inner .clr -->
</li>
<li class="entry has-media has-product-nav col span_1_of_4 owp-content-center owp-thumbs-layout-horizontal owp-btn-normal owp-tabs-layout-horizontal has-no-thumbnails product type-product post-522 status-publish outofstock product_cat-ausruestung product_cat-outdoor has-post-thumbnail post-password-protected taxable shipping-taxable purchasable product-type-variable">
<div class="product-inner clr">
<div class="woo-entry-image clr">
<a href="https://google.de" class="woocommerce-LoopProduct-link no-lightbox"><img src="https://picsum.photos/300/300" class="woo-entry-image-main" width="300" height="300"></a>
</div>
<!-- .woo-entry-image -->
<ul class="woo-entry-inner clr">
<li class="image-wrap">
<div class="outofstock-badge">
Ausverkauft
</div>
<!-- .product-entry-out-of-stock-badge -->
<div class="woo-entry-image clr">
<a href="https://google.de" class="woocommerce-LoopProduct-link no-lightbox"><img src="https://picsum.photos/300/300" class="woo-entry-image-main" width="300" height="300"></a>
</div>
<!-- .woo-entry-image -->
</li>
<li class="category"><a href="https://google.de" rel="tag">Ausrüstung</a>, <a href="https://google.de" rel="tag">Outdoor</a></li>
<li class="title">
<h2><a href="https://google.de">Geschützt: Habicht 10×40 W</a></h2>
</li>
<li class="price-wrap"></li>
<li class="wc-gzd">
<p class="wc-gzd-additional-info tax-info">inkl. MwSt.</p>
<p class="wc-gzd-additional-info shipping-costs-info">zzgl. <a href="https://google.de" target="_blank">Versandkosten</a></p>
<p class="wc-gzd-additional-info delivery-time-info"></p>
<p class="wc-gzd-additional-info product-units-wrapper product-units"></p>
</li>
<li class="rating"></li>
<li class="btn-wrap clr"><a href="https://google.de" data-quantity="1" class="button product_type_variable" data-product_id="522" data-product_sku="" aria-label="Wähle Optionen für „Habicht 10x40 W“" rel="nofollow">Ausführung wählen</a></li>
</ul>
</div>
<!-- .product-inner .clr -->
</li>
<li class="entry has-media has-product-nav col span_1_of_4 owp-content-center owp-thumbs-layout-horizontal owp-btn-normal owp-tabs-layout-horizontal product type-product post-483 status-publish last instock product_cat-hosen product_cat-outdoor has-post-thumbnail post-password-protected taxable shipping-taxable purchasable product-type-variable has-default-attributes">
<div class="product-inner clr">
<div class="woo-entry-image-swap woo-entry-image clr">
<a href="https://google.de" class="woocommerce-LoopProduct-link no-lightbox"><img src="https://picsum.photos/300/300" class="woo-entry-image-main" width="300" height="300"></a>
</div>
<!-- .woo-entry-image-swap -->
<ul class="woo-entry-inner clr">
<li class="image-wrap">
<div class="woo-entry-image-swap woo-entry-image clr">
<a href="https://google.de" class="woocommerce-LoopProduct-link no-lightbox"><img src="https://picsum.photos/300/300" class="woo-entry-image-main" width="300" height="300"></a>
</div>
<!-- .woo-entry-image-swap -->
</li>
<li class="category"><a href="https://google.de" rel="tag">Hosen</a>, <a href="https://google.de" rel="tag">Outdoor</a></li>
<li class="title">
<h2><a href="https://google.de">Geschützt: MIG 4.0 Trousers</a></h2>
</li>
<li class="price-wrap">
<span class="price"><span class="woocommerce-Price-amount amount"><bdi>238,00 <span class="woocommerce-Price-currencySymbol">€</span></bdi></span></span>
</li>
<li class="wc-gzd">
<p class="wc-gzd-additional-info tax-info">inkl. MwSt.</p>
<p class="wc-gzd-additional-info shipping-costs-info">zzgl. <a href="https://google.de" target="_blank">Versandkosten</a></p>
<p class="wc-gzd-additional-info delivery-time-info"></p>
<p class="wc-gzd-additional-info product-units-wrapper product-units"></p>
</li>
<li class="rating"></li>
<li class="btn-wrap clr"><a href="https://google.de" data-quantity="1" class="button product_type_variable add_to_cart_button" data-product_id="483" data-product_sku="" aria-label="Wähle Optionen für „MIG 4.0 Trousers“" rel="nofollow">Ausführung wählen</a></li>
</ul>
</div>
<!-- .product-inner .clr -->
</li>
</ul>
</div>解决方案
你可以用 flex 做到这一点。这里的问题是您没有固定物品的高度。一旦你修复了图像的高度，你必须在 flex 父类中添加这一行
justify content: space-evenly;
但首先你必须修复弹性项目的高度，特别是图像。
您还必须使用margin-bottom。
推荐阅读
- java - 无法使用 monger 插入文档
- javascript - 在 Chrome 扩展中将变量数组 outta options.html 中的变量设置为 background.js
- app-store - 当我在 AppStore 的“等待开发者发布”时提交新版本
- c++ - GetLastError() == 0 导致延迟发生 CreateDialogIndirect() 失败的原因
- julia - 如何检查两个数组是否相等，即使它们在 Julia 中包含 NaN 值？
- javascript - 使用节点 http 发送和接收纯文本而不是对象
- database - 解决多个实体的数据库架构
- c# - 在 C# 中使用丢弃作为返回方法
- excel - 是否可以在已过滤的工作表上使用 VBA 代码？
- wordpress - 如何修复 Wordpress 中的 reCaptcha？