html - 元素网格中元素的 CSS/HTML 对齐显示不正确

Question

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

例如，如果您访问此站点:http://pcsg.asia/shop-by-category/exfoliants.html?limit=9并在大于 30 英寸的屏幕上查看此站点，您将毫无疑问地看到所有元素都按顺序排列且彼此相邻。使用网格模式。

但是，如果您在任何小于 24 英寸左右的屏幕上访问此网站，您将看到产品未以正确的倍数显示(即一行 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 将是自动添加到每个元素以将其适本地放置在一行中。

试试这个