1

我使用 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-->
4

2 回答 2

1

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

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

  • jQuery.js
  • 基础.js
  • 基础均衡器.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 居中，有很多方法可以做到这一点，一篇关于这个主题的好文章是我经常引用的在未知中居中。我建议不要使用 flexbox，因为它仅在最新的浏览器中受支持。在这种情况下，我使用了表格单元格方法，我发现它最适合在 Foundation 中进行水平居中。

我.inner在你的 div 中添加了.grid-textdiv。然后我添加了以下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

于 2015-09-08T06:17:14.667 回答
0

好吧，如果您的意思是字体大小，请尝试：

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

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

于 2015-09-05T01:31:33.527 回答