在div中對齊響應內容

Question

使用基金會6。

有3列，每列有：

• 圖片（始終相同大小）
• 標題（長度可變）
• 文字（長度可變）
• 紐扣

如何使它們在整個列中水平對齊？

這是當前情況： 當前情況

我需要什么： 在此處輸入圖片描述

本節的當前代碼：

 <div class="row small-up-1 medium-up-3 large-up-3 " data-equalizer="prodMain" > <div class="column" data-equalizer-watch="prodMain" > <img class="thumbnail" src="http://img1.10bestmedia.com/Images/Photos/96123/captiva-beach-captiva_54_990x660_201404211817.jpg" /> <h5>Lorem ipsum ipsum ipsum</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p> <a href="#" class="button tiny ">ABOUT THE LOREM</a> </div> <div class="column" data-equalizer-watch="prodMain"> <img class="thumbnail" src="http://img1.10bestmedia.com/Images/Photos/96123/captiva-beach-captiva_54_990x660_201404211817.jpg" /> <h5>Lorem ipsum</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p> <a href="#" class="button tiny ">ABOUT THE LOREM Y</a> </div> <div class="column" data-equalizer-watch="prodMain"> <img class="thumbnail" src="http://img1.10bestmedia.com/Images/Photos/96123/captiva-beach-captiva_54_990x660_201404211817.jpg" /> <h5>Lorem ipsum & Lorem ipsum </h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p> <a href="#" class="button tiny ">ABOUT OUR LOREM</a> </div> </div><!--/ --> 

Answer 1

如果您想使用jquery，則可以嘗試在HTML中添加一個類似於same-height的類，然后使用jquery進行測試

HTML（添加額外的類名same-height ）

<div class="row small-up-1 medium-up-3 large-up-3 same-height" data-equalizer="prodMain" >

Java腳本

$(function() {

    function getLargest(elements) {
      largest = 0;
      $(elements).each(function(i, obj) {
        if($(this).height() > largest) {
          largest = $(this).height();
        }
      });
      return largest;
    }

    function setHeights(elements, largest) {
      $(elements).each(function(i, obj) {
        $(this).height(largest);
      });
    }

    var largest = getLargest('.same-height h5');
    setHeights('.same-height h5', largest);
    var largest = getLargest('.same-height p');
    setHeights('.same-height p', largest);

});

工作正常，但是如果您想調整瀏覽器的大小或將屏幕大小限制為某些大小，則需要額外的代碼。