Question

使用基金会6。

有3列，每列有：

图片（总是相同尺寸）
标题（长度不一）
文字（长度不等）
按钮

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

这是目前的情况： current situation

我需要什么： enter image description here

此部分的当前代码：

＆＃13;

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

＆＃13;

Answer 1

如果你想使用jquery，你可以尝试在你的html中包含一个像same-height这样的类，然后用jquery进行测试

HTML（添加额外的班级名称相同高度）

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

});

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

在div中对齐响应内容

1 个答案: