合わせ応答コンテンツ</p> <p>は、それぞれが有する3列を持つFOUNDATION 6を用い

Question

：

• 画像（常に同じサイズ）
• タイトル（長さが異なる）
• テキスト（私が持つことができますどのように）の長さが変化する
• ボタン

それらはすべて列全体に水平に整列しますか？

これが現在の状況です： 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のを使用したい場合あなたはできましたその後、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); 

}); 

作品罰金（余分なクラス名同じ高さを追加）をテストあなたのhtmlに同じ高さのようなクラスを含め、Y、ブラウザのサイズを変更したり、特定のスクリーンサイザーに制限したりする場合は、余分なコードが必要になります。