Php 不同分辨率的响应LI和UL未正确对齐

我做电子商务CMS已经三个月了，我刚刚发现这个问题。我通常是使用PHP的后端开发人员，这不是我的优点

在我的分辨率1440x900上，页面正在加载精细的3列*X行数：

问题发生在较小的块分辨率上，例如，您可以在1063x1280上看到。

以下是当前代码，标签在三篇文章之后定期被破坏：

<div class="category-products">
    <div class="col-3-grid">

        <ul class="products-grid clearfix" style="margin-right: 5px; margin-left: 20px;">


            <li class="item last" style="min-height: 339px; margin-right: 15px;">
                <a id="product-image-42321" href="proizvod/suspe-22-41471-ger" title="naziv" > 
                    <!-- GLAVNA SLIKA -->
                    <img src="http://------------/images/artikli/22-41471.jpg" width="220px" alt="SUSPENSION MULTI-PLIER" /><br />
                </a>
                <ul class="swatches clearfix">
                    <a href="proizvod/suspe-22-41471-ger" title="SUSPENSION MULTI-PLIER">
                        <li id="swatch-79452" class="swatch product-104101"><img style="display: inline-block; border: 1px solid #B6B6B6; padding: 2px; margin-bottom: 0px !important;" src="images/amconf/crna.jpg" > </img></li>         
                    </a>
                </li>
            </ul>

            <div class="price-box">
                <span class="label" id="configurable-price-from-42321">
                    <span class="configurable-price-from-label">
                    </span>
                </span>


                <div class="product-name"><a id="product-name-140981" href="proizvod/suspe-22-41471-ger">SUSPENSION MULTI-PLIER</a></div>

                <span class="regular-price" id="product-price-42321">
                    <span class="price">88,00<sup>KM</sup>
                    </span>
                </span>
            </div>

            <div class="actions">
            </div>

        </li>

网格系统CSS整个CSS非常庞大，我不允许上传这么多内容，所以：

/** 3 column grid - based on a 960px grid system **/
.col-3-grid .products-grid .item {
  float: left;
  margin: 1.8421052631578945% 1.8421052631578945% 0 0;
  width: 31.710526315789473%;
  padding-top: 10px;
  text-align: center;
  position: relative;
}
.col-3-grid .products-grid .item.last {
  margin-right: 0;
}
.col-3-grid .product-image img {
  height: auto;
  width: auto;
}
.col-3-grid .products-grid .item .price-box {
  margin-bottom: 20px;
}
  /** 2 Grids - (Single Column Layouts) **/
  .col-3-grid .products-grid .item {
    min-height: 0 !important;
    float: none;
    margin: 9px 0 0;
    width: 100%;
    text-align: center;
  }
  .col-3-grid .products-grid .item.last,
  .col-3-grid .products-grid .item.last {
    margin-right: 0;
  }
/* Products grid */
.products-grid {
  *zoom: 1;
}
.products-grid:before,
.products-grid:after {
  display: table;
  content: "";
  line-height: 0;
}
.products-grid:after {
  clear: both;
}
.products-grid:before,
.products-grid:after {
  content: " ";
  display: table;
}
.products-grid:after {
  clear: both;
}
.products-grid .item {
  float: left;
  margin: 1.8421052631578945% 1.8421052631578945% 30px 0;
  width: 31.842105263157894%;
  text-align: center;
}
.products-grid .item .product-name {
  margin: 15px 0 5px 0;
  padding: 0 8px;
}

---

感谢您的帮助。谢谢

如果网格系统工作不正常，可以根据自适应视图对样式使用媒体查询 e、 g:

---

我打赌这是你的边框、填充、边距和小数百分比

当你在小数点后使用这么多数字时，如果浏览器比你的浏览器小，那么边框的空间就没有多大了，通过混合像素宽度和百分比，你只会让你自己变得更难

尝试使用outline属性和简单的百分比，如下所示：

box {
  width:25%;
  margin: 1.5%;
  padding: 2.5%;
  outline 1px solid #b6b6b6;
}

---

我找到了有关此问题的更多信息。

根据您的设计断点，有一个媒体查询来清除中等或较小屏幕

拥有像clearElement这样的类，并将其添加到每三个元素中。 添加这样的查询

@media (max-width: 600px) {
.clearElement{
   clear:both;
     }
}

---

你在第二个img标记中缺少了一个style=，因为它混合了内联样式，而且是一个复杂的、只是部分解释的网格系统，我认为你唯一的机会是通过jsfiddle获得问题的实时链接或简化版本。

box {
  width:25%;
  margin: 1.5%;
  padding: 2.5%;
  outline 1px solid #b6b6b6;
}

@media (max-width: 600px) {
.clearElement{
   clear:both;
     }
}