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

Question

我有一个使用 Zurb Foundation 的复杂嵌套行和列布局。我想让带有文本'.grid-text'的div与行的高度相同。我尝试了各种策略来做到这一点，但它最终破坏了 flexbox 垂直文本居中。我还搜索了 StackOverflow 问题，但没有一个解决这个问题。

我最终使用了 Foundation 的均衡器，但由于某种原因它不起作用。有什么建议？我对不同的策略持开放态度。

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，它与Foundation 配合得很好。

我不确定您使用的是什么环境，或者您是否只是在使用 codepen，但您缺少一些 Foundation 需要的 JS 文件，这些文件是我添加到 pen 中的：

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

然后确保 Foundation 已初始化：

$(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，因为它仅在最新的浏览器中受支持。在这种情况下，我使用了表格单元格方法，我发现它最适合在 Foundation 中进行水平居中。

我在 .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;
}

当然，但要测试正常工作的尺寸。