css - 使用zurb foundation 4网格系统设计列表元素

Question

Foundation 4 的网格系统，其移动优先方法在您已经使用其他基础元素(无论是文本内容、图像/内容的总体布局像主要内容和侧边栏这样的页面)。

在下面的示例页面中，每个灰色矩形都是使用网格和嵌套网格制作的:

我经常发现自己在设计“表格数据”，它由看起来有点像这样的元素和子元素(如上图中心的单个灰色框)组成:

某些元素(如控件)必须对齐，当您单击某个元素时，它会显示一个下拉菜单，其中包含有关该元素的更多详细信息。

我经常在模型阶段为这类元素使用网格系统，因为它可以快速实现对齐并尝试不同的宽度，但是在改进设计时，基础网格在调整大小时会以其默认行为妨碍浏览器、间距，它会产生大量特定于网格的标记，使 html 代码难以阅读和理解。

所以我的问题是:您是否在设计中使用基础网格来处理这些类型的细节？如果没有，您最喜欢以不同的对齐方式在同一行上获取多个元素并使某些元素彼此对齐的方式是什么(具有硬编码宽度的简单 div？显示:表格？其他？)。

我知道有一个新的 CSS3 flexbox模块来允许这种显示，但在我看来，它更像是基础网格系统的替代品，而不是在设计中对这种级别的细节进行样式化时要走的路。

Answer 1

看起来要走的路是使用 Foundation grid mixins (如页面底部所述)。

它为您提供了两全其美的优势:基础网格的易用性，同时仍然能够微调网格的行为(列之间的空间等)，这对于您设置样式的每个元素都可能不同。

另一个优点是您不需要演示类。而不是写类似的东西

<div class="row">
    <div class="large-12 columns">
        <div class="myItem">My Item</div>
    </div>
</div>

你可以一起去

<div class="myItemWrapper">
    <div class="myItem">My Item</div
</div>

虽然在你的 style.css.scss 中有类似的东西

@import 'foundation_and_overrides';
.myItemWrapper {@include grid-row(nest-collapse);}
.market_label {@include grid-column($columns: 12);}