Вертикальное выравнивание - Основа 5 - Простой Javascript

Question

Вертикальное выравнивание - Основа 5 - Простой Javascript

0

Я использовал описанную здесь технику (ссылка js.fiddle) для достижения вертикального выравнивания для раздела на моей странице.

Проблема в том, что я хотел бы повторно использовать эту технику на другой части моей страницы.

На данный момент это работает, но, очевидно, высота первого экземпляра затем применяется к совершенно не связанному разделу где-то еще, и вертикальное выравнивание не достигается. Может ли кто-нибудь помочь мне с изменением js (возможно, с помощью этого?), Чтобы позволить использовать тот же код для применения высоты к различным элементам в разных частях моей страницы?

Или мне нужно дублировать этот код с разными именами var/class каждый раз, когда я хочу его использовать?

Фрагменты кода ниже

HTML

<div class="row row_v_align">
  <div class="small-3 columns column_v_align">
    <div class="v_align"><img src="spade.png"></div>
  </div>
  <div class="small-9 columns">
    <h3>Title</h3><p>Content</p>
  </div>
</div>
<div class="row row_v_align">
  <div class="small-3 columns column_v_align">
    <div class="v_align"><img src="bullsEye.png"></div>
  </div>
  <div class="small-9 columns">
    <h3>Title</h3><p>Content.</p>
  </div>
</div>

CSS

.row_v_align {
  display: table;
}
.v_align {
  display: table-cell;
  vertical-align: middle;
}

JS

$(window).on("resize", function () {
  var rowHeight = $(".row_v_align").height();
  console.log(rowHeight);
  $(".column_v_align").height(rowHeight);
  $(".v_align").height(rowHeight);
}).resize();

JimmyBob 05 янв. 2014, в 21:59

Источник

Теги:

javascript

jquery

zurb-foundation

css

vertical-alignment

1 ответ

Ещё вопросы

zola · Accepted Answer · 2014-01-05T20-41-00.000Z

Я протестировал код ниже со скрипкой, которую вы связали.

$(document).ready(function(){
    $(".row").each(function(){
        var rowHeight = $(this).height();
        console.log(rowHeight);
        $(".column", this).height(rowHeight);
        $(".v_align", this).height(rowHeight);
    });
});

Поэтому для вас это должно работать:

$(window).on("resize", function () {
  $(".row_v_align").each(function(){
    var rowHeight = $(this).height();
    console.log(rowHeight);
    $(".column_v_align", this).height(rowHeight);
    $(".v_align", this).height(rowHeight);
  });
}).resize();

каждая() функция запуска для каждого согласованного элемента
$ ("...", это) гарантирует, что изменения будут сделаны внутри текущей строки

Спасибо, Золя. Это именно то, что я был после.