html - 在 div 内对齐响应式内容

Question

使用 FOUNDATION 6。

有3列，每列有:

• 图片(始终相同大小)
• 标题(长度不一)
• 文本(长度不一)
• 按钮

如何让它们在整个列中水平对齐？

这是目前的情况: current situation

我需要: enter image description here

这部分的当前代码:

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

Javascript

$(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);

});

工作正常，但如果你想调整浏览器的大小或限制某些屏幕尺寸，你需要额外的代码。