html - Foundation 中的中心列组

Question

有没有办法在Foundation中将一组奇数列居中？由于不均匀，我看不出如何使用提供的偏移选项来实现这一点，因为偏移量必须是非整数。

下图解释了我想要实现的目标。总共 6 个单列 div，其中 5 个在整行居中，与第一列有 2.5 列的偏移量。

Answer 1

这个解决方案在 Foundation 术语中有点非正统，但您的设计需要一个非正统的解决方案。

首先在CSS中给该行一个半列宽度的右填充；1 列 = 8.3333% 宽度，因此该填充应为 4.1666%。

接下来给第一列的右边距也为 4.1666%。

现在给第二列一个 2 列的偏移量，你应该在那里（最后一列也需要 class end 以使其与前一列左对齐）。

<div class="column first-column">...</div>
<div class="column large-1 large-offset-2">...</div>
...[other columns]...
<div class="column end">...</div>

.row { padding-right: 4.1666%; }
.first-column { margin-right: 4.1666%; !important}

您可能需要 !important 在这些不寻常的边距和填充上一个（我不记得临时）来覆盖列上的 margin:0 的 Foundations 设置 - 如果没有它这些填充和边距不起作用，请尝试 !important）。（注意：我从 Foundation 5 开始工作，我没有使用早期版本）。