Question

嗨我在我的新网站上遇到困难，这些项目相互重叠我如何使每个div与位置相对和块相同，请每次检查下面的图像我有一个很长的描述这发生< / p>

html

<li class="home_small_box ">
    <a href="http://domain.asia/product/polo-shirt-3/" class="woocommerce-LoopProduct-link">        </a><div><a href="http://domain.asia/product/polo-shirt-3/" class="woocommerce-LoopProduct-link">
    </a><a href="http://domain.asia/product/polo-shirt-3/">

    <span class="onsale">Sale!</span>
<img width="360" height="360" src="http://domain.asia/wp-content/uploads/2016/11/t4-360x360.jpg" class="attachment-home-small-box size-home-small-box wp-post-image" alt="t4" srcset="http://domain.asia/wp-content/uploads/2016/11/t4-360x360.jpg 360w, http://domain.asia/wp-content/uploads/2016/11/t4-150x150.jpg 150w, http://domain.asia/wp-content/uploads/2016/11/t4-180x180.jpg 180w, http://domain.asia/wp-content/uploads/2016/11/t4-300x300.jpg 300w" sizes="(max-width: 360px) 100vw, 360px">  </a>
    </div>
        <div class="sb_title"><a href="http://domain.asia/product/polo-shirt-3/">Long Sleeves Shirt</a></div>

        <div class="sb_price">

<div itemprop="description">
    <p>With the right With the rightWith the rightWith the right</p>
</div>

    <span class="price"><ins>NOW:&nbsp;&nbsp; <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">₱</span>699.00</span></ins> <del>BEFORE:&nbsp;&nbsp; <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">₱</span>899.00</span></del><span class="yes"> DISCOUNT:&nbsp;&nbsp; 22% </span></span>
        </div>
    <a rel="nofollow" href="/product-category/clothing/?add-to-cart=683" data-quantity="1" data-product_id="683" data-product_sku="" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a></li>

css

 .home_small_box {
        float: left;
        width: 260px;
        margin-right: 50px;
        margin-bottom: 30px;
        position: relative;
        display: inline-block;
        margin-top: 15px;
    }

产品项目li处于相对位置

0 个答案: