Question

我有两个Foundation列，其中有两个div，每个div都有文本。这两个文本的长度不一样，这就是为什么div不总是相同的高度（取决于媒体查询）

q = q.filter(~(WFLeilao.leilao.in_(subquery))) \
     .filter(~(Wfleilao.itemleilao.in_(subquery)))

我想要做的是，两个div总是相同的高度（根据div中的大多数文本）。另外，我想将文本居中于较少文本的div中。我总是习惯这样做，Flexbox。但它因基础网格布局而崩溃。有什么想法吗？

仅限CSS！

Answer 1

您始终可以在.row类上使用display：table，并在列上显示：table-cell。无论内容如何，表格单元格都会强制两个div具有相同的高度。

Answer 2

来自基础文档：

您可以使用一些数据属性创建一个相等高度的容器。将data-equalizer属性应用于父容器。然后申请 data-equalizer-watch属性为您希望拥有的每个元素一个相同的高度。 data-equalizer-watch属性的高度将是等于最高元素。

<div class="row" data-equalizer>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
</div>

Foundation Doc

根据内容在不同列中生成两个相同高度的div

2 个答案: