Question

我一直在做电子商务CMS三个月了，我只是发现了这个问题。我通常是一个使用PHP的后端开发人员，这不是我“光明的一面”。

在我的分辨率1440x900上，页面正常加载（3列* X行数）： enter image description here

问题出现在较小（块）分辨率上，例如，您可以在1063x1280处看到。 enter image description here

这是当前的代码（标签在三篇文章后定期打破）：

<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

如果您的网格系统无法正常工作，您可以根据自适应视图使用媒体查询例如：

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

Answer 2

我敢打赌，这是你的边界，填充，边距和小数百分比..

当您在小数点后使用这么多数字时，边框的空间不大，如果浏览器比您的小，并且通过混合像素宽度和百分比，您只是让自己更难。

尝试使用outline-property和＆＃34; simple＆＃34;百分比，如下：

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

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

Answer 3

根据您的设计断点，让媒体查询清除中型或小型屏幕。

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

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

响应性LI和UL在不同分辨率上没有正确对齐

3 个答案: