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>

并排放置元素

1 个答案: