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
|
|