Question

我有四个div类和一个按钮，它们共同构成网站上的单个广告。

.awpcp-listing-primary-image-thumbnail
.a
.awpcp-listing-excerpt-content
.awpcp-listing-excerpt-extra
.awpcp-listing-excerpt-inner

我想将每个集合组合在一起（1个广告），以在移动设备中并排显示两个，在桌面中并排显示4个。如何使用CSS执行此操作？

HTML：

<div class="awpcp-listings awpcp-clearboth">
  <div class="awpcp-listing-excerpt displayaditemseven
    $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">
      <a class="awpcp-listing-primary-image-listing-link"
         href="https://adsler.co.uk/wp-user-test-dashboard-
    2/awpcp-show-ad/22/nicos-cleaning-
    service/london/uk/westminster/business-advert/"><img
          class="awpcp-listing-primary-image-thumbnail"
          alt="Nico&#039;s Cleaning Service"
          src="https://adsler.co.uk/wp-
    content/uploads/awpcp/thumbs
    /flyermaker_15032019_134523-ac957ffd-primary.png"
          width="80"/></a>
    </div>
    <div class="awpcp-listing-excerpt-inner" style="w">
      <h4 class="awpcp-listing-title"><a
          href="https://adsler.co.uk/wp-user-test-dashboard-
    2/awpcp-show-ad/22/nicos-cleaning-*
    service/london/uk/westminster/business-
    advert/">Nico&#039;s Cleaning Service</a></h4>
      <div class="awpcp-listing-excerpt-content">We are
        professional domestic cleaners in London. £12.00 per
        hour, all equipment and materials need to be provided,
        minimum booking&hellip;</div>
    </div>
    <div class="awpcp-listing-excerpt-extra">
      03/21/2019<br/>
      London<br/>
      Price: £ 12.00
    </div>

Answer 1

您可以尝试CSS flex和flex-flow属性。

display: flex;
flex-flow: row wrap;

https://css-tricks.com/almanac/properties/f/flex-flow/

如何将div并排放置？

1 个答案: