この状況で、製品を水平に配置するにはどうすればよいでしょうか?
フィドルを作成しました: 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…</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">$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">$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>