/ / Зурб Фоундатион 5 Екуализер Ацросс Цолумнс - зурб-фоундатион-5, екуализер

Зурб Фоундатион 5 Екуализер Ацросс Цолумнс - зурб-фоундатион-5, екуализер

Имам 3 колоне. У свакој колони имам дивизион са дивим словима, наслов див и детаљ див. Могу да користим Екуализер да све колоне имају исту висину, али оно што бих желео да урадим је да сви насловни дивови буду на једнакој висини преко истог реда тако да се све може лепо поставити.

Направио сам код и сличицу. Свака помоћ би се ценила.

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>

Сцреенсхот Хвала!

Одговори:

0 за одговор № 1

Поставите атрибут еквилајзера на главни див и гледајте на појединачне наслове дивс-а (без великог броја вашег кода за краткотрајност):

<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>

* тестиран са в5.5.2

унесите опис слике овде


Сродна питања


Коментари (0)

Додајте коментар