Question

我有一些广告希望并排放置并保持相同的尺寸，但是float: left可以使它们向左浮动，display: inline-block应该将它们并排堆叠在网格中一边，而max-width则没有。

尝试过的CSS

@media (min-width: 768px){.box- 
layout {max-width: 100%; float: 
left; display: inline-block;}}

如前所述，它会向左浮动，但不会并排放置或使所有广告的尺寸相同。它还引发float和display不能一起使用的css lint障碍。

https://adsler.co.uk/find-an-event/

HTML：

<div class="line-layout" 
style="display: none;">
<li class="event_listing post-6985 
type-event_listing status-expired 
hentry" style="visibility: 
visible;" data-latitude="" data- 
longitude="">
<div class="event- 
info-row-listing">
<a href="https://adsler.co.uk/
event/new-cross-and-deptford-free- 
film-festival/">
<div class="row"><div class="col- 
md-1">
<div class="organizer-logo">
<img alt="Deptford Film Festival" 
src="https://adsler.co.uk/wp- 
content/uploads/event-manager-  
uploads/event_banner/2019/05/2
456d41f16399aed538d25b1cd32ad1
4.jpg">
</div>
</div><div class="col-md-4">
<div class="event-title">
<h4>New Cross and 
Deptford Free Film Festival</h4>
<div class="boxes-view- 
listing- 
registered-code">
</div>
<div class="event- 
organizer- 
name">
<normal>Deptford Film Festival
<normal></normal>
</normal>
</div>
</div>
<div class="col-md-2">
<div class="date" 
<date>2019-05-26</date>
</div>
</div>
<div class="col-md-3">
<div class="event- 
location"><i class="glyphicon 
glyphicon-map- 
marker"></i> London </div>
</div>
<div class="col-md-2">
<div class="event- 
ticket">#free</div>
</div>
<div class="col-md-3">
</div>
</div>
</a>
</div>
</li>
</div>
<!-- Box Layout -->
<a class="event_listing post-6985 
type-event_listing status-expired 
hentry" href="https://adsler.co.uk
/event/new-cross-and-deptford-free- 
film-festival/">
<div class="box-layout">
<div class="event-img"><img 
alt="Deptford Film Festival" 
src="https://adsler.co.uk/wp- 
content/uploads/event-manager-  
uploads/event_banner/2019/05/2
456d41f16399aed538d25b1cd32
ad14.jpg"></div>
<div class="boxes-view-box- 
registered-code">
</div>
<div class="event-title">
New Cross and Deptford Free Film 
Festival
</div>
<div class="event-start- 
date">2019- 05-26
</div>
<div class="event-location">
<i class="glyphicon glyphicon- 
map- 
marker"></i> London </div>
<div class="box-footer">
<div class="event- 
ticket">#free</div>
</div>
</div>
</a>

Answer 1

您的html和CSS非常混乱。我举了一个例子，它应该是怎样以及如何工作。附言不要注意

max-width:800px;

那只是出于演示目的。

https://codepen.io/anon/pen/QXWLrg

希望它可以帮助您！

如何使用内联块

1 个答案: