/ / Zurb Foundation 5 Equalizer über Spalten - zub-foundation-5, Equalizer

Zurb Foundation 5 Equalizer über Spalten - zub-foundation-5, Equalizer

Ich habe eine 3-spaltige Reihe. In jeder Spalte habe ich ein Thumbnail, ein Titeldiv und ein Detaildiv. Ich kann Equalizer verwenden, um alle Spalten auf die gleiche Höhe zu bringen, aber ich möchte, dass alle Titel-Divs in derselben Zeile die gleiche Höhe haben, damit sich alles gut anordnen lässt.

Ich habe einen Codepen und einen Screenshot erstellt. Jede Hilfe wäre willkommen.

http://codepen.io/renny/pen/VLNZRx

 <div class="row">
<div class="small-12 medium-12 columns">
<div class="row" data-equalizer="row1">
<div class="grid-item small-12 medium-4 large-4 columns" data-equalizer-watch="row1">
<article class="tease tease-event">
<div class="thumbnail">
<img src="/images/http://placehold.it/300x200" alt="">
</div>
<div class="title">
<a href="#">Event Banana</a>
</div>
<div class="details">
<ul class="no-bullet">
<li>
Date: Mon 12 Oct 3:00pm  to 4:00pm
</li>
<li>
Location: My Place
</li>
<li>
Eventbrite: https://www.eventbrite.co.uk/e/unusual-test-tickets-18079722938
</li>
</ul>
</div>
</article>
</div>
<div class="grid-item small-12 medium-4 large-4 columns" data-equalizer-watch="row1">
<article class="tease tease-event">
<div class="thumbnail">
<img src="/images/http://placehold.it/300x200" alt="">
</div>
<div class="title">
<a href="#">Monday Event Number 2, with quite a long title, let"s see how we manage to make it fit</a>
</div>
<div class="details">
<ul class="no-bullet">
<li>
Date: Mon 12 Oct 3:00pm  to 4:00pm
</li>
<li>
Location: My Place
</li>
<li>
Eventbrite: https://www.eventbrite.co.uk/e/unusual-test-tickets-18079722938
</li>
</ul>
</div>
</article>
</div>
<div class="grid-item small-12 medium-4 large-4 columns" data-equalizer-watch="row1">
<article class="tease tease-event">
<div class="thumbnail">
<img src="/images/http://placehold.it/300x200" alt="">
</div>
<div class="title">
<a href="#">Voluptatem vel facere illum quaerat similique deleniti</a>
</div>
<div class="card-content">
<ul class="no-bullet">
<li>
Date: Mon 12 Oct 3:00pm  to 4:00pm
</li>
<li>
Location: My Place
</li>
<li>
Eventbrite: https://www.eventbrite.co.uk/e/unusual-test-tickets-18079722938
</li>
</ul>
</div>
</article>
</div>
</div>
</div>
</div>

Bildschirmfoto Vielen Dank!

Antworten:

0 für die Antwort № 1

Setzen Sie ein Equalizer-Attribut auf das Haupt-Div und beobachten Sie einzelne Titel-Divs wie folgt (wobei Sie den meisten Code aus Platzgründen weglassen):

<div class="row" data-equalizer="title"> <-- this is your main div just before the first small-12
...rest of your code goes here

<div class="title" data-equalizer-watch="title"> <-- add watch on each of the title divs
<a href="#">Event Banana</a>
</div>

...rest of your code goes here

<div class="title" data-equalizer-watch="title">
<a href="#">Monday Event Number 2, with quite a long title, let"s see how we manage to make it fit</a>
</div>

...rest of your code goes here

<div class="title" data-equalizer-watch="title">
<a href="#">Voluptatem vel facere illum quaerat similique deleniti</a>
</div>

</div>

* getestet mit v5.5.2

Bildbeschreibung hier eingeben


Verwandte Fragen


Kommentare (0)

Einen Kommentar hinzufügen