并排放置元素

Question

我有一个广告列表页面，在那里我想把列表放在一起-两个两个。有什么方法可以用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/25/scalf/london/uk/barnet/clothes/">. 
    <img class="awpcp-listing-primary-image-thumbnail" 
    alt="Scalf" src="https://adsler.co.uk/wp- 
    content/uploads/awpcp/thumbs/img_
    20190509_111641-fb80c099-primary.jpg" 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/25/scalf/london/uk/barnet/clothes/">Scalf</a></h4>
      <div class="awpcp-listing-excerpt-content">A second hand scalf. Grey, warm and good condition.</div>
    </div>
    <div class="awpcp-listing-excerpt- extra">
      05/09/2019<br/>London<br/>Price: £ 0.99</div>
    <span class="fixfloat"></span></div>
  <div class="fixfloat"></div>
  <div class="awpcp- 
    listing-excerpt displayaditemsodd $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/24/the-plumed-serpent-d- 
    h-lawrence/london/uk/barnet/books/"><img class="awpcp-listing-primary-image-thumbnail" alt="The 
    Plumed Serpent - D. H. Lawrence" src="https://adsler.co.uk/wp- 
    content/uploads/awpcp/thumbs/12101950-34ec6e5b- 
    primary.jpg" 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/24/the-plumed-serpent-d- 
    h-lawrence/london/uk/barnet/books/">The Plumed 
    Serpent - D. H. Lawrence</a></h4>
      <div class="awpcp- 
    listing-excerpt-content">Used but readable condition. One of his lesser known works, but nevertheless an intriguing tale of pastorally inspired pagan methodologies&hellip;
      </div>
    </div>
    <div class="awpcp-listing-excerpt- 
    extra">
      05/08/2019<br/> London
      <br/> Price: £ 0.99
    </div>
    <span class="fixfloat"></span>
  </div>
  <div class="fixfloat"></div>
</div>
<div class="pager">
  <form class="awpcp-pagination-form" method="get">.
    <table>
      <tbody>
        <tr>
          <td>1</td>
          <td>
            <select name="results">
              <option value="5">5</option>

我有权修改的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
  </div><span class="fixfloat"></span>
</div>
<div class="fixfloat"></div>

如果对html的第二部分进行了修改，我很乐意考虑，但也许css可以确定这一点？页面：https://adsler.co.uk/browse-adsler/

更具挑战性的问题之一是，每个列表都有太多的div。所以，为了以css为目标，我必须这样做。.awpcp-subtitle, . .awpcp-show-ad,.awpcp-listing-excerpt-inner,.awpcp-listing-excerpt-extra,.....

Answer 1

你当然可以。试试下面的代码。

​

*
{
  box-sizing:border-box;
}
.advertise_container
{
display:flex;
flex-wrap:wrap;
}
.advertise
{
flex:100%;
padding:10px;
}

@media only screen and (min-width:576px)
{
.advertise
{
      flex:50%;
}
}
@media only screen and (min-width:768px)
{
.advertise
{
      flex:33.33%;
}
}
@media only screen and (min-width:992px)
{
.advertise
{
      flex:25%;
}
}

<div class="advertise_container">
<div class="advertise">
oneeeee
</div>
<div class="advertise">
oneeeee
</div>
<div class="advertise">
oneeeee
</div>
<div class="advertise">
oneeeee
</div>
<div class="advertise">
oneeeee
</div>
<div class="advertise">
oneeeee
</div>
<div class="advertise">
oneeeee
</div>
<div class="advertise">
oneeeee
</div>
<div class="advertise">
oneeeee
</div>
<div class="advertise">
oneeeee
</div>
<div class="advertise">
oneeeee
</div>
</div>

​