Question

我试图解决手机纵向和横向的兼容性布局问题。我有一组div，它们可以在移动环境中正确显示，但不能在移动人像环境中正确显示。使用@media似乎无法解决问题，但是orientation: portrait也不起作用。请在您的手机上查看this page，然后在下面找到CSS HTML。有关其外观的示例，请在移动设备上查看https://www.gumtree.com。

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

Answer 1

请更新CSS类，希望可以解决您的问题

.awpcp-listings {
    display: flex;
}
.awpcp-listing-excerpt {
    min-width: 10%;
    box-shadow: 0 8px 16px #888888 !important;
    border-style: solid;
    color: grey;
    border-radius: 4px;
}

如何使用@media纠正响应式显示？

1 个答案: