找到你要的答案

Q:Changing a list layout on mobile devices only using css

Q:改变列表布局移动设备只使用CSS

I have the following code on a wordpress site. I can't change the html, so, only using css @media queries I would like to make the list go from 4 per row on a desktop, down to 2 per row in a viewport of under 767px.

Is that possible?

.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">	<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">	<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">	<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">	<span class="product-title">Happy Jackson Snack Box Set</span>
          </a>
          
        </li>
      </ul>
    </div>
  </div>
</div>

我在一个WordPress站点有以下代码。我不能改变HTML,所以,只有使用CSS media查询我想名单从4每排在桌面上,下降到2每排在一个视图中的767px。

那可能吗?

.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">	<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">	<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">	<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">	<span class="product-title">Happy Jackson Snack Box Set</span>
          </a>
          
        </li>
      </ul>
    </div>
  </div>
</div>
answer1: 回答1:

Try using float: left in the under 767px and increase the width of <li>.

For example try this code:

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

尝试使用浮动:在767px增加& lt宽度左;李& gt;。

例如尝试这个代码:

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

It's entirely possible to do this. You could have your default code as something like this (mobile first approach) - you may need to play around with the percentage to make sure the two fit side by side:

.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;
}

and then add a media query at the end (again adjust the min-width to suit you) that brings them back to the four column layout as you currently have it, as the screen widens.

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

完全有可能做到这一点。你可以有你的默认代码像这样(移动的第一种方法)-你可能需要玩的百分比左右,以确保这两个配合并排:

.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%;
    }
}
html  css  wordpress