如何使用CSS在网格中排列元素?

时间:2019-05-15 05:43:34

标签: html css wordpress

我有几个元素可以在移动景观和桌面中正确显示为网格,但拒绝在移动肖像中显示为网格。我尝试将orientation:portrait应用于这些元素,但没有任何效果。查看页面:https://adsler.co.uk/browse-adsler/和我要达到的效果https://www.gumtree.com

Css:

.awpcp-listings {
display: flex;
flex-wrap: wrap;
}

.awpcp-listing-excerpt {
min-width: 20%;
margin-right: 15px;
box-shadow: 0 8px 16px #888888 !important;
border-style: solid;
color: grey;
border-radius: 4px;
margin-bottom: 10px;
flex-grow: 2;
}

.awpcp-listing-excerpt-inner {
min-width: 140px;
min-height: 200px;
}

.awpcp-listing-excerpt-content {
display: none;
}

.awpcp-listing-title {
font-size: 10px;
padding: 5px;
text-align: left;
background-color: yellow;in 
}

.awpcp-listing-excerpt-extra {
margin-left: 20px;
}

HTML:

<div class="awpcp-listing-excerpt $awpcpdisplayaditems 
$isfeaturedclass" data-breakpoints-class-prefix="awpcp- 
listing-excerpt" data-breakpoints='{"tiny": [0,328], "small": 
[328,600], "medium": [600,999999]}'>
<div class="awpcp-listing-excerpt-thumbnail">
$awpcp_image_name_srccode
</div>
<div class="awpcp-listing-excerpt-inner" style="w">
<h4 class="awpcp-listing-title">$title_link</h4>
<div class="awpcp-listing-excerpt- 
content">$excerpt</div>
</div>
<div class="awpcp-listing-excerpt-extra">
$awpcpadpostdate $awpcp_city_display 
$awpcp_state_display $awpcp_display_adviews 
$awpcp_display_price $awpcpextrafields

0 个答案:

没有答案