0

この状況で、製品を水平に配置するにはどうすればよいでしょうか?

フィドルを作成しました: http://jsfiddle.net/bxSE6/

CSS:

  .cart-collaterals .cross-sells,
  .cart-collaterals .cart_totals,
  .cart-collaterals .shipping_calculator {
    width: 48%;
    float: right;
  }
  .cart-collaterals .cross-sells {
    float: left;
  }
  .cart-collaterals .cross-sells ul.products li {
    width: 48%;
    margin-right: 3.8%;
  }
  .cart-collaterals .cross-sells ul.products li:nth-child(2n) {
    margin-right: 0;
  }
  .cart-collaterals .cross-sells ul.products li.last {
    margin-right: 3.8%;
  }

HTML:

<div class="cross-sells">

        <h2>You may be interested in&hellip;</h2>

        <ul class="products">

                <li class="post-430 product type-product status-publish hentry first instock">


    <a href="http://www.drdermacare.co.nz/product/skin-polishing-cloth/">

        <div class="img-wrap"><img width="400" height="319" src="http://www.drdermacare.co.nz/wp-content/uploads/2013/05/SkinPolishingCloth_7-400x319.jpg" class="attachment-shop_catalog wp-post-image" alt="SkinPolishingCloth_7" /></div> <!--/.wrap-->
        <h3>Skin Polishing Cloth</h3>


    <span class="price">NZD <span class="amount">&#36;12.95</span></span>

    </a>



    <a href="http://www.drdermacare.co.nz/product/skin-polishing-cloth/" rel="nofollow" data-product_id="430" data-product_sku="" class="learn_more button product_type_add_to_cart_button">Learn More</a><a href="/cart/?add-to-cart=430" rel="nofollow" data-product_id="430" data-product_sku="" class="add_to_cart_button button product_type_simple">Buy Now</a>

</li>

                <li class="post-436 product type-product status-publish hentry last instock">


    <a href="http://www.drdermacare.co.nz/product/sos-acne-prevention-pen-new/">

        <div class="img-wrap"><img width="328" height="400" src="http://www.drdermacare.co.nz/wp-content/uploads/2013/05/SOS-AcnePen-HIGH-RES_7-328x400.jpg" class="attachment-shop_catalog wp-post-image" alt="SOS-AcnePen HIGH RES_7" /></div> <!--/.wrap-->
        <h3>SOS Acne Prevention Pen NEW!</h3>


    <span class="price">NZD <span class="amount">&#36;24.95</span></span>

    </a>



    <a href="http://www.drdermacare.co.nz/product/sos-acne-prevention-pen-new/" rel="nofollow" data-product_id="436" data-product_sku="" class="learn_more button product_type_add_to_cart_button">Learn More</a><a href="/cart/?add-to-cart=436" rel="nofollow" data-product_id="436" data-product_sku="" class="add_to_cart_button button product_type_simple">Buy Now</a>

</li>

        </ul>
    </div>
4

3 に答える 3

1

これを試して

.product { display: inline-block; }

私はそれを試してみましたが、うまくいきます。

于 2013-06-24T02:02:33.727 に答える
0

私はお勧めします:

.prooducts li {
      float: left;
 }
于 2013-06-24T01:52:06.217 に答える