问题标签 [vertical-rhythm]

我拼凑了这个 jQuery 函数。其目的是计算内部所有 img 元素的边距，div.article以平衡图像的高度与文档的基线网格，即 20 px。为了匹配我的基线网格，每个图像高度应该是 20 的倍数。如果不是这种情况，例如一个图像的高度是 154 px，该函数会为 img 添加 6 px 边距，以便与基线平衡网格恢复。

该功能正常工作，所以我的实际问题是：由于我不是程序员，我想知道我的代码是否非常糟糕，虽然它正在工作，如果是这样，如何改进代码？

jQuery代码：

HTML 代码示例，带标题的 img：

HTML 代码示例，不带标题的 img：

编辑：根据 Russ Cam 的建议改进代码：

有没有办法将不同大小的多个标题的第一行对齐到同一基线？也不管后面的文字，也应该对齐。

请参阅http://snapplr.com/snap/z1mw上的图片

编辑：重新上传：

替代文字 http://img144.imageshack.us/img144/7615/screenshot2010021722h53.png

在我看来，唯一的解决方案是将每个标题和每个正文文本放入单独的 DIV 中，然后将标题与 padding-top 或 margin-top 一起使用以对齐它们（例如，H1 将是 36px 与 0px 边距，而 H3 将是24 像素，上边距 12 像素）。像这样的东西：

但这不是很好的解决方案。请问有更好的吗？

非常感谢！

这是（一个奇怪的）给你的。

我在 WordPress 网站上工作，重要的是让图像位于 18px 的基线网格上，其中总图像尺寸始终是 18px 的倍数，高度被额外裁剪 8px。这主要是一个布局问题，让图像与文本很好地配合。

我试图弄清楚如何在以下位置连接到 WP/GD 功能：

1. 图像调整为正常大小（缩略图、中、大），仅在 WP 管理中设置最大宽度。
2. 图像高度（数学，圆形？）裁剪为最接近的 X 倍数（在本例中为 18px）。
3. 使用新高度，通过减去另一个高度的 X 值（在本例中为 8px）再次裁剪。

理想情况下，最终结果将是一个插件，其中可以在多站点环境中为单个用户激活和编辑值。

已经搜索和搜索，但没有一个更聪明。

任何想法或（付费）帮助都会很棒，非常感谢！

F。

我正在开发一个面向排版的 wordpress 主题[1]，但我在使用内嵌图像时遇到了麻烦。

我可以控制每个元素并调整它的行高、下边距、ecc，以保持垂直节奏。但是由于通过编辑器粘贴的图像可以有任何高度，它们显然会破坏以下所有内容。

所以问题是是否可以使用边距、填充、两者或其他解决方案，以确保独立于图像大小，它将调整到基线。

我知道有一些替代方法，比如让所有图像变成线高的倍数，这样我就可以保持节奏。其他选项是使用 javascript，不理想，但如果没有 css 解决方案，我将不得不考虑它。

[1] 如您所见，这是一个与 css 相关的问题，而不是 wordpress 问题，这就是我在这里发布这个问题的原因。

我正在尝试构建具有一致垂直节奏（对齐基线）的 2 列布局。对此的计算非常简单，我让它们运行良好。我的问题是这样的：

当两列文本并排放置时，当列中的垂直边距不是“整行”时，是否可以保持（或恢复）垂直节奏。

在此示例中：http: //jsfiddle.net/beejamin/PMCXt/我有一个无序列表，其中列表和列表项都有“半行”的边距底部。当列表项为偶数时，边距加起来为一整行，并保持节奏（这很好！）。但是，当有奇数时，基线将被丢弃，并且永远无法再次加入（除非我很幸运并且出现了另一个奇数列表）。

在列表项上设置整行边距太多（特别是对于长列表），并且不设置边距是不够的。

有什么办法可以避免/减轻这种情况吗？我不会提前知道行数，也不想为此使用javascript（我正在尝试构建一个可以重复使用的通用方案）。

关于这个垂直节奏设置工具： http ://drewish.com/tools/vertical-rhythm

我的 p 需要 1.25em 的下边距和 0em 的上边距。

我位于 p 中的 16px 字体需要 0 的边距底部和 1.25em 的边距顶部。

如何在不调用 p 的情况下设置 16px 的样式？

在寻求保持图像垂直节奏的解决方案时，我从Filipe Fortes http://www.fortes.com/2008/jmetronome-using-jquery-to-keep-typographic-rhythm找到了这个出色的脚本：

它对我来说非常好，但由于我正在开发一个移动项目，我想知道如何将它翻译成纯 JavaScript。

是否有任何现有的插件/扩展程序/方法来保持 Twitter 的 Bootstrap 项目的垂直节奏？

创建好的垂直节奏模板是一项相当费力的任务，我宁愿使用预烘焙的解决方案。我愿意接受创造性的建议，我只希望我的页面最终能很好地对齐。

编辑：澄清我的追求...

垂直节奏是一种用于确保页面上的每个元素都按照水平网格排列的技术。这是通过将每个项目的高度、填充和边距设置为符合标准单位行大小来实现的。如果段落中的一行文本是 20px 高（包括边距和填充），那么标题 4 也可能是 20px 高，而标题 1 可能是 40px 高。这保持了跨栏文本的节奏。

我想将这种技术与 bootstrap（来自 twitter）结合使用，但要让一切看起来都很好，需要做很多工作。例如，所有按钮都需要符合与段落文本等相同的垂直高度定义......引导程序中使用了其他标准控件，它们也都需要规则来适当地定义它们的高度。

我可以从垂直节奏的通用解决方案开始，这对于实现我想要的目标大有帮助，但我想知道是否有其他人已经开始这样做，或者对实现这一目标的另一种方法有任何想法。

编辑：假设没有什么像我想要的......

也许只是一个好的基于垂直节奏的 css 模板将是一个很好的起点。最好是继续开发、已经可用、经过深思熟虑和适应性强的东西。

我试图了解垂直节奏并阅读一整天，尝试了几件事，但我的布局不断中断，因为我未能正确应用指南针填充拖车，如您在屏幕截图中看到的那样：

！截屏

• 黄色背景的线是我的 hr 标签。
• 橙色背景的是文章。

这是我的代码：

HTML：

CSS：

为了简单起见，我评论了我的 HR 造型。

这是另一个差距更明显的例子：

！截图2

我不知道我在这里做错了什么。请帮助我了解此属性。

链接：

• http://compass-style.org/reference/compass/typography/vertical_rhythm/#mixin-trailing-border
• http://www.youtube.com/watch?v=ls3Clk-kz3s&feature=player_detailpage#t=464s

网页设计中的行高和印刷（InDesign 等）中的行高是不一​​样的。结果接近：

• 在网络http://jsfiddle.net/Y9M28/4/（在 webkit 中更好）
• 在打印http://jsfiddle.net/Y9M28/3/

我尝试了很多技巧，但正如您在我的打印示例中看到的那样，由于多行，最后一段的边距很差。现代浏览器是否可以做得更好？我知道http://baselinecss.com/但这有很多相对位置和顶部调整不是很灵活。

最后一个解决方案是在许多单行中为单独的多行块添加 javascript（但要重）。