我有一个广告列表页面,我想将列表并排放置 - 两个两个。有没有办法用 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…
</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,.....
最佳答案
当然可以。试试下面的代码。
*
{
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>
关于html - 并排放置元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56057930/