问题标签 [vertical-rhythm]

有很多 CSS 的“等高列”、“圣杯”布局、巧妙的实现，display: table-cell当然还有一些很好的display: flex想法，尤其是在 SO 上。

但是我正在尝试实现我在其他任何地方都找不到的东西，而且如果不求助于 JS，我就无法实现，我宁愿避免。

我正在尝试创建一组等高的父容器，每个容器都有一组在卡片之间共享高度的子元素。每张卡片通过排水沟与其他相邻卡片隔开。显然我不能发布图片，因为我是新手，但视觉上更容易解释。所以这里有一个免费图片托管网站的链接：http: //postimg.org/image/ltcd8ns1l/

在图像中，您会看到三张卡片（1、2、3），每张卡片都有三个部分（1a、1b、1c、2a、2b、2c、3a、3b、3c）。卡片中的每个部分与其他卡片中的等效部分高度相同（即 1b = 2b = 3b、1c = 2c = 3c 等）。每个等效部分（例如 1b、2b 和 3b）的高度由这些部分中最高的部分（即最高的“b”）的高度决定。最高部分的高度由该部分内的内容量决定。

我已经能够使用一种display: table方法在视觉上实现这一点，包括用于卡片之间的排水沟的单独“表格单元”元素，但不幸的是，标记是无序且无语义的，如下所示：

...可怕。

所以我也能够得到一些与display: flex. 这是 CodePen 中的快速演示：http: //codepen.io/anon/pen/xbXWpQ

为了后代，这里是 HTML：

和 SCSS：

我更喜欢 HTML using flex，因为它的顺序正确并且不包含无意义的元素。

但这还远远不够：我希望能够将每张卡片包装在自己的元素中，例如。<article>...</article>. 部分原因是整张卡片可以是一个链接，但也因为在我看来这将提供更清晰、更适当的分隔标记。但flex不是那样工作的，所以很棘手。

我已经摆弄了很长时间，但我没有看到不使用 JS 或讨厌的 HTML 的方法。我宁愿避免这两种情况。

关于如何实现这一目标的任何想法？

如果我有一个line-height等于我的基线网格，则行高和文本换行根据网格很好地工作。但如果我想要水平分隔线，它就会偏离基线。display:table-cell通常我会使用负边距来说明边框的高度，但这对元素没有任何影响。

我无法更改行高来19px弥补它，因为这意味着文本换行会脱离网格。还有其他方法可以弥补1px每行的额外高度吗？

我正在使用 Compass/SCSS 和垂直节奏方法开发一个 HTML 页面。我已经以 rem 单位为段落和标题设置了基线和指定的高度。它效果很好，并且很好地放置在垂直节奏网格上。但是，我有一个占列宽度 100% 的中心图像（我希望它具有响应性并随浏览器窗口缩放）。

问题是这个图像打破了垂直节奏，因为它的高度是根据浏览器宽度和图像纵横比动态计算的，并且不尊重基线。

我该如何处理这种情况才能获得完美的垂直节奏？

这是演示该想法的屏幕截图：

如您所见，图像下方的文本脱离了 VR 网格。

我尝试使用Respond.js jQuery 插件，但看起来它已经过时并且无法正常工作。

我有一个关于垂直节奏缩放线高的问题。我将在下面的示例中使用像素，只是为了让事情变得更容易。假设这是我的 p-tag 的基本结构：

现在在这种情况下，我将节奏单位设置为 30px。所以，问题一：这是否意味着我的元素之间的垂直间距需要是 30 的倍数，我的行高需要是 30 的倍数。对吗？

我的第二个问题是，你如何调整间距，所以顶部比底部更多？假设我想制作一个边缘底部小于顶部的 h2。如何在不破坏垂直节奏的情况下正确缩放？

有没有办法设置一个 CSS 基线网格（垂直节奏），如果标题最终出现在多行上，它不会分崩离析？