html - 防止包含图像的列表被破坏

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>元素换行，这是不需要的，因为图片和价格/文本不再以这种方式在一起。

关于如何防止这种情况的任何想法？如果你想测试:这是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;
}