只使用css更改移动设备上的列表布局

Question

我在wordpress网站上有以下代码。我无法更改html，因此，仅使用css @media查询，我希望列表从桌面上的每行4行开始，在767px以下的视口中每行减少到2行。

这可能吗？

.recent_view_prod ul.product_list_widget li { 
 
    width: 22%; 
 
    margin-right: 2%; 
 
} 
 
.recent_view_prod ul.product_list_widget li img { 
 
    width: 100%; 
 
    float: left; 
 
} 
 
.recent_view_prod ul.product_list_widget li { 
 
    display: inline-block; 
 
} 
 
.recent_view_prod span.product-title { 
 
    display: none; 
 
} 
 

 
a:hover > .attachment-shop_thumbnail + span { 
 
    display: block; 
 
    position:absolute; 
 
}

<div class="wpb_widgetised_column wpb_content_element recent_view_prod"> 
 
    <div class="wpb_wrapper"> 
 
    <div id="woocommerce_recently_viewed_products-3" class="widget woocommerce widget_recently_viewed_products"> 
 
     <h3 class="widget-title element-title">Recently Viewed Products</h3> 
 
     <ul class="product_list_widget"> 
 
     <li> 
 
      <a href="http://uc.petekirkwood.co.uk/shop/opulent-bloom-card-holder/" title="Opulent Bloom Card Holder"> 
 
      <img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/TedBaker_CardHolderOpulentBloom_2-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="TedBaker_CardHolderOpulentBloom_2"> \t <span class="product-title">Opulent Bloom Card Holder</span> 
 
      </a> 
 
      
 
     </li> 
 
     <li> 
 
      <a href="http://uc.petekirkwood.co.uk/shop/store-ms/" title="Store-M's Nesting Food Boxes"> 
 
      <img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/StoreMs1-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="StoreMs1"> \t <span class="product-title">Store-M's Nesting Food Boxes</span> 
 
      </a> 
 
      
 
     </li> 
 
     <li> 
 
      <a href="http://uc.petekirkwood.co.uk/shop/happy-jackson-crackers-tin/" title="Happy Jackson Crackers Tin"> 
 
      <img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/HappyJCrackersTIn-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="HappyJCrackersTIn"> \t <span class="product-title">Happy Jackson Crackers Tin</span> 
 
      </a> 
 
      
 
     </li> 
 
     <li> 
 
      <a href="http://uc.petekirkwood.co.uk/shop/happy-jackson-snack-box-set/" title="Happy Jackson Snack Box Set"> 
 
      <img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/SnackBoxSetx4_2-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="SnackBoxSetx4_2"> \t <span class="product-title">Happy Jackson Snack Box Set</span> 
 
      </a> 
 
      
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

尝试在使用float: left 767px下和提高的<li>宽度。

例如试试这个代码：

.recent_view_prod ul.product_list_widget li { 
    float: left; 
    margin-right: 2%; 
    width: 40%; 
} 

Answer 2

这是完全有可能做到这一点。你可以有你的默认代码是这样的（移动第一种方法） - 你可能需要用百分比侧，以确保这两个配合侧周围玩：

.recent_view_prod ul.product_list_widget li { 
    display: block; 
    float: left; 
    width: 47%; 
    margin-right: 2%; 
} 
.recent_view_prod ul.product_list_widget li img { 
    width: 100%; 
    float: left; 
} 
.recent_view_prod ul.product_list_widget li { 
    display: inline-block; 
} 
.recent_view_prod span.product-title { 
    display: none; 
} 

a:hover > .attachment-shop_thumbnail + span { 
    display: block; 
    position:absolute; 
} 

，然后在添加媒体查询结束（再次调整最小宽度以适合您），使其回到四列布局，就像屏幕扩大一样。

@media (min-width: 25em){ 
    .recent_view_prod ul.product_list_widget li { 
     width: 22%; 
    } 
}