CSS - 가로 맞춤

이 경우 내 제품을 가로로 정렬하는 가장 좋은 방법은 무엇입니까?CSS - 가로 맞춤

나는 바이올린을 만들었습니다 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>

출처

2013-06-24 Jess McKenzie

이

.product { display: inline-block; }

시도 난 그냥 그것을 시도하고 작동합니다.

출처

2013-06-24 02:02:33

위의 링크를 기반으로 한 피들 (fiddle)을 제공 할 수 있습니까? 사람들을 움직일 수는 없습니다. –

[피들] (http://jsfiddle.net/lloanalas/bxSE6/2/) –

jsfiddle.net과 같은 그리드 형성에서 제품을 원합니다./HxMmg –

http://jsfiddle.net/bxSE6/1/

.products li { 
list-style-type:none; 
    text-align:center; 
}

출처

2013-06-24 01:47:49 sinisake

제품이 맞지 않아요. 제품 맞춤 콘텐츠가 아닙니다. –

그냥 이미지를 의미합니까? – sinisake

이처럼 http://jsfiddle.net/HxMmg/ –

내가 좋을 것 :

.prooducts li { 
     float: left; 
}

출처

2013-06-24 01:52:06

그게 내가 생각하고 있었지만 그것의 정렬되지 않습니다 –

흠 ... 내가 무엇을하는지 볼 수 있도록 귀하의 페이지에 연결할 수 있습니까? 또는 그것이 무엇을하고 있는지 설명 할 수 있습니까? 필자는이 기술을 그리드 기반의 데이터 레이아웃과 네비게이션 메뉴에 대해 자주 사용합니다. 다양한 높이가 균일 한 흐름을 방해 할 수 있으므로 .products> li의 높이를 설정하려고 할 수 있습니다. –

CSS - 가로 맞춤

답변

관련 문제