代码之家 › 专栏 › 技术社区 › Christian Ivicevic

将多个基础网格单元缩小到相同宽度

zurb-foundation css html

Christian Ivicevic · 技术社区 · 7 年前

目前,我正在使用一个响应视图,它应该模拟一个由n行和2列组成的表。目前我正在使用 large-2 和 large-10 为了柱子,偶然发现 *-shrink 和 *-auto 基础课。当然,我不能用下面这些:

<div className='grid-x grid-margin-x space'>
  <div className='cell small-12 large-shrink text-bold'>
    {translation.currentSaldoLabel}
  </div>
  <div className='cell small-12 large-auto'>
    {overview.totalUnsettledRevenue.toFixed(2)}
  </div>
</div>
<div className='grid-x grid-margin-x'>
  <div className='cell small-12 large-shrink text-bold'>
    {translation.currentDateLabel}
  </div>
  <div className='cell small-12 large-auto'>
    {overview.requestDate.formatDayMonthYear()} - {formatLocalTime(overview.requestTime)}
  </div>
</div>

此代码段将缩小第一列中的单元格,但宽度不会与这些单元格之间没有实际关系的宽度相同。我想知道是否有任何可行的方法可以同时调整多个单元格的宽度,使它们缩小到相同的大小。