我正在尝试让我的元素在移动人像中看起来一样。尝试@media screen and (orientation: portrait) ...
,因为它在横向上看起来不错,但没有任何变化。
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;
}
.awpcp-listing-excerpt-extra {
margin-left: 20px;
}
例如,将以上所有div都以@media screen and
进行了尝试。...
@media screen and (orientation: portrait) {.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
@media screen
应该可以同时并排显示元素。在移动环境中,他们会这样做,在移动肖像中,他们不会。