使用基礎（均衡器）將行設置爲行高

Question

我有使用Zurb基金會的複雜嵌套行&列布局。我想讓文本'.grid-text'的div與行的高度相同。我已經嘗試過各種策略來做到這一點，但它最終打破了Flexbox垂直文本居中。我也搜索了StackOverflow的問題，但沒有解決這個問題。

我結束了使用基金會的均衡器，但由於某種原因，它不工作。有什麼建議麼？我對不同的策略持開放態度。

http://codepen.io/anon/pen/bVNjyv

我試圖jQuery和均衡器：

$(document).ready(function() { 
    var rowHeight=$('.v-align').height(); 
    $('.grid-text').height(rowHeight); 
}); 

<div class="row v-align" data-equalizer data-equalizer-mq="large-up"> 
     <div class="large-4 column b full-width"> 
      <div class="grid-text" data-equalizer-watch> 
      <h3>A</h3> 
      <p>text</p> 
      </div> 
     </div> 
     <div class="large-8 column full-width"> 
      <img src="http://placehold.it/2604x1302/00FFCC" data-equalizer-watch> 
     </div> 
    </div><!--/row9--> 

Answer 1

對於這種佈局，我傾向於使用Masonry這與基金會很好。

我不知道你用什麼樣的環境，或者如果你只是使用codepen但你缺少基金會需要我加入到筆的幾個JS文件：

• 的jquery.js
• foundation.js
• foundation.equalizer.js

然後確保基金被初始化：

$(document).foundation(); 

我更新了你的HTML如下：

<div class="row"> 
    <div class="show-for-large-up large-3 column full-width"> 
    <img src="http://placehold.it/1302x2604/FF3333"> 
    </div> 
    <div class="large-9 column"> 
    <div class="row" data-equalizer data-equalizer-mq="large-up"> 
     <div class="large-4 column b full-width"> 
     <div class="grid-text" data-equalizer-watch> 
      <div class="inner"> 
      <h3>A</h3> 
      <p>text</p> 
      </div> 
     </div> 
     </div> 
     <div class="large-8 column full-width" data-equalizer-watch> 
     <img src="http://placehold.it/2604x1302/00FFCC"> 
     </div> 
    </div> 
    </div> 
    <div class="large-6 columns full-width"> 
    <img src="http://placehold.it/2604x1302"> 
    </div> 
    <div class="show-for-large-up large-3 columns full-width last"> 
    <img src="http://placehold.it/1302x2604/FFFF99"> 
    </div> 
    <div class="large-9 columns"> 
    <div class="row" data-equalizer data-equalizer-mq="large-up"> 
     <div class="large-8 columns full-width" data-equalizer-watch> 
     <img src="http://placehold.it/2604x1302/FF9966"> 
     </div> 
     <div class="large-4 columns b full-width"> 
     <div class="grid-text" data-equalizer-watch> 
      <div class="inner"> 
      <h3>A</h3> 
      <p>text</p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

對於CSS中心有很多方法可以做到這一點，一個偉大的文章對主題閱讀是Centering in the unknown我經常引用。我建議不要使用flexbox，因爲它只支持最新的瀏覽器。在這種情況下，我使用了表格單元格方法，我發現它最適合在基礎中進行水平居中。

我在.grid-text div中加入了div .inner。然後我添加了以下css：

.grid-text { 
    display: table; 
    text-align: center; 
    width: 100%; 
    // no need to set the height here 
    // as it's set by data-equalizer 
} 

.grid-text .inner { 
    display: table-cell; 
    vertical-align: middle; 
} 

希望有所幫助。

http://codepen.io/thmsmtylr/pen/EVjXye

Answer 2

好，如果你的意思是字體大小隻是嘗試：

.v-align { 
     align-items: center; 
     font-size: 10px; 
} 

，但測試可以正常工作，當然大小。