Question

我不是编码员，但我已经承担了修复即将推出的网站上的一些问题的任务。典型的故事对吗？我真的很想学。我已经搜索了论坛并尝试了很多解决方案，但没有一个解决了我的问题。请温柔。

我有一个woo商务页面，每个项目有多个div。对于前两个项目，有一个额外的div，其中包含一个引起注意项目的横幅。看起来这个额外的div会导致它上面的其他内容相互粉碎。

这是指向屏幕截图的链接 - 我是新的，我可以发布图片。 https://www.dropbox.com/s/2g0nn1boxkytaxg/Screen%20Shot%202017-05-25%20at%2011.30.29%20AM.png?dl=0

同样，我已尝试过其他帖子的各种修补程序：

Beginner's stuff: How to stop CSS' Divs from overlapping?

How do I stop these divs from overlapping?

这些解决方案都没有帮助我。

这是页面上前3个项目的HTML。前两个有一个＆＃34;匹配你＆＃34;横幅和第三个没有。重叠的文字是＆＃34; p＆＃34; ＆＃34; 24通道数字调音台＆＃34;正在砸到div class =＆＃34; ss-price＆＃34;

的顶部

＆＃13;

</div>
</div>
<!--end col-xs-12 col-md-4 -->

<div id="product-results-col" class="col-xs-12 col-sm-12 col-md-10">

  <!--<h1 class="page-title">Shop</h1>-->





  <ul class="products">



    <div class="col-md-3 ss-product post-120 product type-product status-publish has-post-thumbnail product_cat-audio product_cat-mixer pa_brand-yamaha first instock sale featured taxable shipping-taxable purchasable product-type-simple">
      <div class="row matched">
        <div class="col-xs-12 col-sm-12 col-md-12 product-container">
          <a href="http://solvesunday.wpengine.com/product/yamaha-tf-series-digital-console-w-25-motor-faders-48-inputs-mixing-capacity-24-local-xlrtrs-combo-inputs-2-rca-16-xlr-outputs-tf3/" class="woocommerce-LoopProduct-link"><img width="300" height="300" src="http://solvesunday.wpengine.com/wp-content/uploads/2016/12/YAMAHA-TF-Series-Digital-Console-w-25-Motor-Faders-48-inputs-Mixing-Capacity-24-Local-XLRTRS-Combo-Inputs-2-RCA-16-XLR-Outputs-TF3-300x300.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image"
              alt="YAMAHA - TF Series Digital Console w/ 25 Motor Faders, 48-inputs Mixing Capacity, 24 Local XLR/TRS Combo Inputs, 2 RCA, 16 XLR Outputs (TF3)" title="YAMAHA - TF Series Digital Console w/ 25 Motor Faders, 48-inputs Mixing Capacity, 24 Local XLR/TRS Combo Inputs, 2 RCA, 16 XLR Outputs (TF3)"
              srcset="http://solvesunday.wpengine.com/wp-content/uploads/2016/12/YAMAHA-TF-Series-Digital-Console-w-25-Motor-Faders-48-inputs-Mixing-Capacity-24-Local-XLRTRS-Combo-Inputs-2-RCA-16-XLR-Outputs-TF3-300x300.jpg 300w, http://solvesunday.wpengine.com/wp-content/uploads/2016/12/YAMAHA-TF-Series-Digital-Console-w-25-Motor-Faders-48-inputs-Mixing-Capacity-24-Local-XLRTRS-Combo-Inputs-2-RCA-16-XLR-Outputs-TF3-150x150.jpg 150w, http://solvesunday.wpengine.com/wp-content/uploads/2016/12/YAMAHA-TF-Series-Digital-Console-w-25-Motor-Faders-48-inputs-Mixing-Capacity-24-Local-XLRTRS-Combo-Inputs-2-RCA-16-XLR-Outputs-TF3-180x180.jpg 180w, http://solvesunday.wpengine.com/wp-content/uploads/2016/12/YAMAHA-TF-Series-Digital-Console-w-25-Motor-Faders-48-inputs-Mixing-Capacity-24-Local-XLRTRS-Combo-Inputs-2-RCA-16-XLR-Outputs-TF3.jpg 600w"
              sizes="(max-width: 300px) 100vw, 300px" />
            <a href="http://solvesunday.wpengine.com/product/yamaha-tf-series-digital-console-w-25-motor-faders-48-inputs-mixing-capacity-24-local-xlrtrs-combo-inputs-2-rca-16-xlr-outputs-tf3/">
              <div class="meta">YAMAHA &#8211; TF3...</div>
            </a>
            <div class="ss-price"><del><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>2,999.99</span></del> <ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>2,100.00</span></ins></div>

            <p>24 Channel Digital Mixer</p>
          </a>
        </div>
        <!-- end col-md-12 -->
      </div>
      <!-- end row matched -->

      <div class="row banner-wrapper">
        <div class="col-md-12">
          <div class="matched-banner">Matched for You</div>
        </div>
        <!-- end col-md-12-->
      </div>
      <!-- end row banner -->

    </div>
    <!-- end col-md-3 ss-product-->


    <div class="col-md-3 ss-product post-121 product type-product status-publish has-post-thumbnail product_cat-audio product_cat-mixer pa_brand-yamaha  instock sale featured taxable shipping-taxable purchasable product-type-simple">
      <div class="row matched">
        <div class="col-xs-12 col-sm-12 col-md-12 product-container">
          <a href="http://solvesunday.wpengine.com/product/yamaha-tf-series-digital-console-w-33-motor-faders-48-inputs-mixing-capacity-32-local-xlrtrs-combo-inputs-2-rca-16-xlr-outputs-tf5/" class="woocommerce-LoopProduct-link"><img width="300" height="300" src="http://solvesunday.wpengine.com/wp-content/uploads/2016/12/YAMAHA-TF-Series-Digital-Console-w-33-Motor-Faders-48-inputs-Mixing-Capacity-32-Local-XLRTRS-Combo-Inputs-2-RCA-16-XLR-Outputs-TF5-300x300.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image"
              alt="YAMAHA - TF Series Digital Console w/ 33 Motor Faders, 48-inputs Mixing Capacity, 32 Local XLR/TRS Combo Inputs, 2 RCA, 16 XLR Outputs (TF5)" title="YAMAHA - TF Series Digital Console w/ 33 Motor Faders, 48-inputs Mixing Capacity, 32 Local XLR/TRS Combo Inputs, 2 RCA, 16 XLR Outputs (TF5)"
              srcset="http://solvesunday.wpengine.com/wp-content/uploads/2016/12/YAMAHA-TF-Series-Digital-Console-w-33-Motor-Faders-48-inputs-Mixing-Capacity-32-Local-XLRTRS-Combo-Inputs-2-RCA-16-XLR-Outputs-TF5-300x300.jpg 300w, http://solvesunday.wpengine.com/wp-content/uploads/2016/12/YAMAHA-TF-Series-Digital-Console-w-33-Motor-Faders-48-inputs-Mixing-Capacity-32-Local-XLRTRS-Combo-Inputs-2-RCA-16-XLR-Outputs-TF5-150x150.jpg 150w, http://solvesunday.wpengine.com/wp-content/uploads/2016/12/YAMAHA-TF-Series-Digital-Console-w-33-Motor-Faders-48-inputs-Mixing-Capacity-32-Local-XLRTRS-Combo-Inputs-2-RCA-16-XLR-Outputs-TF5-180x180.jpg 180w, http://solvesunday.wpengine.com/wp-content/uploads/2016/12/YAMAHA-TF-Series-Digital-Console-w-33-Motor-Faders-48-inputs-Mixing-Capacity-32-Local-XLRTRS-Combo-Inputs-2-RCA-16-XLR-Outputs-TF5.jpg 600w"
              sizes="(max-width: 300px) 100vw, 300px" />
            <a href="http://solvesunday.wpengine.com/product/yamaha-tf-series-digital-console-w-33-motor-faders-48-inputs-mixing-capacity-32-local-xlrtrs-combo-inputs-2-rca-16-xlr-outputs-tf5/">
              <div class="meta">YAMAHA TF5...</div>
            </a>
            <div class="ss-price"><del><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>3,599.99</span></del> <ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>2,520.00</span></ins></div>

            <p>32 Channel Digital Mixer</p>
          </a>
        </div>
        <!-- end col-md-12 -->
      </div>
      <!-- end row matched -->

      <div class="row banner-wrapper">
        <div class="col-md-12">
          <div class="matched-banner">Matched for You</div>
        </div>
        <!-- end col-md-12-->
      </div>
      <!-- end row banner -->

    </div>
    <!-- end col-md-3 ss-product-->


    <div class="col-xs-12 col-sm-12 col-md-3 ss-product">
      <div class="row not-matched">
        <div class="col-xs-12 col-sm-12 col-md-12 product-container">
          <a href="http://solvesunday.wpengine.com/product/hosa-pro-mic-cable-rean-xlr3f-to-xlr3m-20-awg-x-2-ofc-90-ofc-braid-5hmic-005/" class="woocommerce-LoopProduct-link"><img width="300" height="300" src="http://solvesunday.wpengine.com/wp-content/uploads/2016/12/HOSA-Pro-Mic-Cable-REAN-XLR3F-to-XLR3M-20-AWG-x-2-OFC-90-OFC-Braid-5-HMIC-005-300x300.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image"
              alt="HOSA - Pro Mic Cable, REAN XLR3F to XLR3M, 20 AWG x 2 OFC, 90 % OFC Braid, 5&#039; (HMIC-005)" title="HOSA - Pro Mic Cable, REAN XLR3F to XLR3M, 20 AWG x 2 OFC, 90 % OFC Braid, 5&#039;	(HMIC-005)" srcset="http://solvesunday.wpengine.com/wp-content/uploads/2016/12/HOSA-Pro-Mic-Cable-REAN-XLR3F-to-XLR3M-20-AWG-x-2-OFC-90-OFC-Braid-5-HMIC-005-300x300.jpg 300w, http://solvesunday.wpengine.com/wp-content/uploads/2016/12/HOSA-Pro-Mic-Cable-REAN-XLR3F-to-XLR3M-20-AWG-x-2-OFC-90-OFC-Braid-5-HMIC-005-150x150.jpg 150w, http://solvesunday.wpengine.com/wp-content/uploads/2016/12/HOSA-Pro-Mic-Cable-REAN-XLR3F-to-XLR3M-20-AWG-x-2-OFC-90-OFC-Braid-5-HMIC-005-180x180.jpg 180w, http://solvesunday.wpengine.com/wp-content/uploads/2016/12/HOSA-Pro-Mic-Cable-REAN-XLR3F-to-XLR3M-20-AWG-x-2-OFC-90-OFC-Braid-5-HMIC-005.jpg 600w"
              sizes="(max-width: 300px) 100vw, 300px" />
            <a href="http://solvesunday.wpengine.com/product/hosa-pro-mic-cable-rean-xlr3f-to-xlr3m-20-awg-x-2-ofc-90-ofc-braid-5hmic-005/">
              <div class="meta">HOSA &#8211; Pro Mic Cable, REAN XLR3F to XLR3M, 20 AWG x 2 OFC, ...</div>
            </a>
            <div class="ss-price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>5.35</span>
            </div>

            <p>REAN XLR3F to XLR3M.</p>
          </a>
        </div>
        <!-- end col-md-12 -->
      </div>
      <!-- end row not-matched -->
    </div>

＆＃13;

以下是PAGE的相对CSS：

＆＃13;

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

＆＃13;

非常感谢任何帮助。我已经浏览了整个论坛，看起来这是一个经常遇到的问题，但其他解决方案都没有帮助，所以我希望可以找到自定义解决方案。如果我没有提供足够的信息或代码，请告诉我。

更新的代码小册子

以下是Style.css中包含的内容

＆＃13;

.ss-product .ss-price {
  color: #aa7d29;
  font-size: 1.5rem;
  font-weight: 700;
  position: absolute;
  bottom: 10px;
}

＆＃13;

和

＆＃13;

.matched .ss-price {
	color: #aa7d29;
    font-size: 1.5rem;
    font-weight: 700;
    position: absolute;
    bottom:10px;
}

＆＃13;

和

＆＃13;

.cart-table .recommended .rec-product .ss-price {
  color: #aa7d29;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 2% 4%;
}

＆＃13;

除了WooCommerce.css之外，它是CSS中任何地方提到的唯一一次，主要是改变小型设备。

我将抨击@ S.M。

的想法

Answer 1

首先，没有足够的代码来重新创建您的问题，但对于附加的屏幕截图，我认为我理解这一点。

其次，导致问题（可能是由于其他因素）导致html正文中的订单与屏幕上的订单不匹配。我的意思是，html是这样的：

图像
价格
描述
＆＃34;匹配你＆＃34;

然而，图中的价格代表了描述。现在，因为＆＃34;匹配为您添加＆＃34;，此价格将被推向其原始位置，在描述之前。有你的问题。某处，必须有代码定义属性：

div.ss-price{}

如果您在此更改值，则可以调整位置以便再次读取。

例如：

div.ss-price{
position:absolute;
margin-top:5px;
}

到目前为止，这不是最好的解决方案，但可能会有效！

position:absolute会将价格置于最初所属的位置（在说明之前），而margin-top将重新调整其位置。但要注意，第三个价格项目也是这个div类的一部分，这些变化也会影响这个项目！

如果这没有帮助，您必须向我们展示更多代码，以便我们找到其他可以修复的参数！

调整浏览器

1 个答案: