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

Question

我从事电子商务 CMS 已经三个月了，我才发现这个问题。我通常是使用 PHP 的后端开发人员，这不是我的“好的一面”。

在我的 1440x900 分辨率下，页面加载正常(3 列 * X-No. of rows):

问题发生在较小的( block )分辨率上，例如，您可以在 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:

.category-products .item {
  border: 1px solid #ececec;
  margin-top: 17px;
  position: relative;
  -webkit-transition: border-color 0.1s linear;
  -moz-transition: border-color 0.1s linear;
  -o-transition: border-color 0.1s linear;
  transition: border-color 0.1s linear;
}
.category-products .item:hover {
  border-color: #f89c29;
}
.category-products .products-list .product-name {
  margin-bottom: 8px;
}
.category-products .products-list .actions {
  float: right;
  font: 24px/24px "UnitedItalicSmCdBk", Arial, sans-serif;
  color: #000000;
  text-transform: uppercase;
  margin: 0 3.1578947368421053% 23px 0;
}
.category-products .products-list .item {
  padding: 28px 0;
}
.category-products .products-list .item .product-shop {
  width: 35.526315789473685%;
  float: left;
}
.category-products .products-list .item .product-shop h3 {
  font-size: 15px;
  line-height: 15px;
}
.category-products .products-list .item .desc {
  font: 15px/20px "UnitedSansSmCdBd", Arial, sans-serif;
  color: #6e6e6e;
}
.category-products .products-list button.utility {
  margin-bottom: 12px;
}
.category-products .products-list .price-box {
  margin: 28px 0;
}
.category-products .products-list .swatches {
  margin-bottom: 20px;
}
.category-products .price-box {
  text-align: center;
  *zoom: 1;
}
.category-products .price-box:before,
.category-products .price-box:after {
  display: table;
  content: "";
  line-height: 0;
}
.category-products .price-box:after {
  clear: both;
}
.category-products .price-box:before,
.category-products .price-box:after {
  content: " ";
  display: table;
}
.category-products .price-box:after {
  clear: both;
}
.category-products .price-box .price-label {
  display: none;
}
.category-products .price-box .old-price,
.category-products .price-box .special-price {
  display: inline-block;
  margin-right: 10px;
}
.category-products .price-box .special-price {
  margin-right: 0;
}
.category-products .price-box .old-price {
  color: #b6b6b6;
}
.category-products .price-box .old-price .price {
  font-size: 18px;
  color: #b6b6b6;
}
.category-products .price-box .special-price .price {
  color: #f89c29;
}
.category-products .product-image-wrapper {
  float: left;
  width: 31.842105263157894%;
  margin-right: 2.236842105263158%;
  text-align: center;
}
.category-products .swatches {
  display: inline-block;
  margin-top: 10px;
}
.category-products .swatches .swatch {
  border: 1px solid #b6b6b6;
  display: inline-block;
  margin: 0 3px 3px 0;
  padding: 2px;
  width: 31px;
}
.category-products .swatches .swatch img {
  width: 100%;
  display: block;
}

网格系统 CSS(整个 CSS 非常庞大，我不允许在 SO 上上传那么多):

/** 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;
}

感谢任何帮助。谢谢!

Answer 1

如果您的网格系统无法正常工作，您可以根据自适应 View 为您的样式使用媒体查询例如:

@media (max-width: 600px) {
  .exmple{
    display: none;
  }