Question

我的网站上有以下布局：List of products

这实际上是Woocommerce产品列表，这是一个无序列表。

列表的HTML看起来像这样：

<div class="widget widget_woocommerce_ndbproducts">
  <ul class="product_list_widget">                  
    <li>
      <a href="https://www.slagerijrudi.be/product/broodje-ham/" title="Broodje Ham">
      <img src="//www.slagerijrudi.be/wp-content/plugins/woocommerce/assets/images/placeholder.png" alt="Placeholder" width="180" class="woocommerce-placeholder wp-post-image" height="180">Broodje Ham</a>
      <span class="woocommerce-Price-amount amount">
        <span class="woocommerce-Price-currencySymbol">€</span>
        2,85
      </span>
    </li>
    <li>...</li>
    <li>...</li>
  </ul>
</div>

为了在桌面上的4列中列出此列表，我添加了以下CSS：

@media screen and (min-width: 1025px) {
  .four-columns ul.product_list_widget {
      -moz-column-count: 4;
      -moz-column-gap: 20px;
      -webkit-column-count: 4;
      -webkit-column-gap: 20px;
      column-count: 4;
      column-gap: 20px;
  }
}

但是，正如您在屏幕截图中的红色箭头所看到的那样，<li>项会获得一个换行符，这不是图片＆amp;价格/文字不再是这种方式。

关于如何防止这种情况的任何想法？如果你想测试：这是the link。

Answer 1

您需要将page-break-inside: avoid和break-inside: avoid（具有更大的浏览器支持）添加到li项目，这样可以防止在这些元素中出现问题：

ul.cart_list li,
ul.product_list_widget li,
.widget_product_categories li {
  page-break-inside: avoid;
  break-inside: avoid;
}

Answer 2

编辑，新解决方案：

现在我已经看过它了，因为除了第一个之外的每个<li>都有一个15px的填充顶部，填充是推动你的第二列向下的东西。如果您可以将其置于每列中的顶部项目没有填充顶部，它应该解决您的问题而不需要任何额外的东西，然后您不必担心解决线路自身。它更像是填充/高度问题，而不是换行问题。

min-height上的<ul>也可能是一种潜在的解决方案，但如果您希望项目更好地对齐，则首选解决填充问题。

防止包含图像的列表中断

2 个答案: