Question

我的网站部分的CSS存在问题。如果屏幕太小，产品网格中显示的产品不会按顺序排列。

例如，如果您访问此网站：http://pcsg.asia/shop-by-category/exfoliants.html?limit=9 并且在大于30＆＃34;的屏幕上查看此网站，您将毫无疑问地看到这些项目都是有序的并且彼此相邻。 使用网格模式。

但是，如果您在屏幕上访问此网站任何小于24＆＃34;或者，您将看到产品没有以正确的倍数显示（即一行中有2行，一行中有1行，然后是2行）

如何对齐它以使所有产品的显示能够很好地相互适应，而不是有不规则的行？谢谢！

我正在使用Magento Go，您可以使用浏览器的开发工具查看CSS。

谢谢！

Answer 1

此代码将连续4行正确对齐项目，但在屏幕尺寸增加和缩小时会弄乱图像

.products-grid li.item{
    width: 225px; // remove this line and add below style
    width:24%;
}
.products-grid .product-image{
    width: 225px; // remove this line and add below style
    width:100%;
}

或者您可以使用此

要在类别页面中将列数从4更改为3，请将以下代码添加到app / design / frontend / your_package / your_theme / layout / local.xml

<catalog_category_default>
    <reference name="product_list">
        <action method="setColumnCount"><count>3</count></action>
    </reference>
</catalog_category_default>
<catalog_category_layered>
    <reference name="product_list">
        <action method="setColumnCount"><count>3</count></action>
    </reference>
</catalog_category_layered>

现在，对于所有屏幕连续对齐列表项目3，请正确使用以下css

.products-grid li.item{
    width: 225px;
    float:left; //Remove this line
    display:inline; //Remove this line
    display:inline-block; //add this line
    margin-right:1px; // remove this line
}

这将为所有屏幕连续设置3个项目，并且由于display设置为inline-block，margin将自动添加到每个项目，以便将其正确定位到行。

试试这个

项目网格中项目的CSS / HTML对齐未正确显示

1 个答案: