Question

有没有办法让

元素列表始终清除它们上面的行而不将CSS放在单独的li元素上？

情况：我正在构建一个使用Business Catalyst CMS的站点。我有一个使用列表构建的产品列表。这一切都很好，除非你移动屏幕，其中一个产品标题超过三行，它使行在跳跃下，只显示一个或两个产品而不是三个。

见样本：

移动屏幕，直到其中一行有间隙。这个差距是我想要避免的。

产品随模块导入，因此我可以将css添加到单个列表项中。它必须是一般的或

解决方案。

我也知道如果我在

中添加一个高度，它会解决这个问题，但这会使响应方面变得混乱，因为我需要选择适用于所有屏幕尺寸的高度。因此，如果它适用于大屏幕，则间隙对于小屏幕布局而言太大。

解决这个问题的想法......？

Answer 1

我在电子商务网站遇到了同样的问题，其中产品标题的范围从2个字到6个或更多，并且还在产品图片下方添加了简短描述。

您需要评估

中的元素

<div class="shop-product-small clear">

...并且不幸地定义了高度和最小高度以确保每个产品div总是相同的高度。也可以使用较小的@media宽度播放font-size。

Answer 2

当li低于断点时（当出现间隙时），将li的宽度设置为50％。或者，如果您使用的是bootstrap，只需将.col-xs-6添加到您的li。