使用基础（均衡器）将行设置为行高

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

，但测试可以正常工作，当然大小。