css - 如何在Woocommerce的移动 View 上每列显示2种产品？

我在智能手机视图中每列显示2种产品时遇到问题。我尝试使用此CSS来自定义外观，但现在将所有产品显示为一行。 URL购物。@media (max-width: 480px) {#dhvc_woo_fc7928715c .dhvc-woo-masonry-list .dhvc-woo-masonry-item { float: left; width: 50%; }}我使用Visual Composer和DHVC Woocommerce产品布局 得到那个样子。当前显示如下：并想要这样：我的CSS有什么问题？ 最佳答案 仅供参考，您的第一个“单列”媒体查询的宽度为767px，而不是480px。也就是说，在DHVC Woocommerce产品布局中的某个位置，应该在设置页面或JavaScript本身中有一个选项可以控制这样的布局选项。编辑：根据插件页面，使用Grid布局选项而不是石工，您可能会有更好的运气：https://codecanyon.net/item/woocommerce-products-layouts/7384574#item-description__features当前，CSS不起作用的原因是因为您已将DHVC设置为使用Masonry布局，该布局将每个元素设置为position: absolute并相应地调整top和left值，因此display: inline-block，和类似的虚假列技巧将不起作用。如果在DHVC设置或JavaScript中找不到该选项，则需要将其带给插件开发人员以寻求进一步的帮助。编辑：就像我说的，我几乎可以保证您要查找的选项在DHVC选项中。使用Masonry选项使“通过CSS使其像您想要的那样”变得更加丑陋和恕我直言。如果您坚持只使用CSS（尽管肯定会在float: left;设置页面中选择更改行为的选项，并且开发人员会提供高级支持）-​​您需要删除父容器上Masonry设置的高度，并覆盖项目上的内联样式。这样的事情会让您入门started ...再次请考虑使用内置选项，或在使用此插件之前询问插件开发人员，这可能会导致您或该站点的下一个负责人日后头痛。@media (max-width: 767px){ /* Masonry sets an absolute defined px based height, overwrite that */ .dhvc-woo-row-fluid.dhvc-woo-masonry-list { height: auto !important; } /* Masonry sets absolute, top, and left, overwrite those as well as setting them to have a small gutter */ .dhvc-woo-item.dhvc-woo-masonry-item { position: relative !important; top: auto !important; left: auto !important; width: 50%; width: calc( 50% - 10px ); float: left; } /* Scooch every second item over 10px */ .dhvc-woo-item.dhvc-woo-masonry-item:nth-child(2n) { margin-left: 10px; }}