對齊一個div內響應內容

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

來源

2016-04-24 Shimi

將高度應用於'title'和'text'，可能是'min-height' –

我想過了，但是我可能會分配空白空間。我還想到了一些js解決方案，測量每個高度標題，然後使它們與最高的一樣高，但這看起來有點矯枉過正。 – Shimi

那麼你需要使用jQuery：D –

如果你想使用jquery你可以tr Ÿ包括像同一高度，你的HTML一類，然後使用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); 

});

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

來源

2016-05-02 14:22:03 user3257693

對齊一個div內響應內容

回答

相關問題