将 div 设置为带基础的行高（均衡器）

Question

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

我最终使用了 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

好吧，如果你指的是字体大小，请尝试：

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

但当然要测试适合的尺寸。

Answer 2

对于这种布局，我倾向于使用 Masonry，它与 Foundation 配合得很好。

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

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，因为它只在最新的浏览器中受支持。在这个例子中，我使用了 table 单元格方法，我发现它最适合 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

将 div 设置为带基础的行高（均衡器）

Setting div to row height with foundation (equalizer)

css

equalizer

zurb-foundation