9

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

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

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

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

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

4

6 回答 6

8

（已编辑——新的和改进的解决方案）

我不知道 WordPress 是否提供了任何方法来生成围绕图像的包装器 div，但如果它提供了，那么这应该可以工作。面对不同的文本比例和图像大小，它相当健壮，尽管您可能需要根据图像的高低来调整交替空格和不间断空格的生成内容字符串的长度。

它的工作方式是它使用负边距使外部图像包装器比内部包装器足够宽，以便在发生换行之前一个不间断的空间将适合一行，然后它生成一串交替的不间断和正常空间，在右边缘一次填充一行，然后溢出到下面的行。最后，等于一个行高的负边距抵消了图像下方部分填充的空间行。

<!DOCTYPE html>
<html>
  <style>
    html {
        line-height: 1.25em;
    }
    .p {
        margin: 0;
        padding: 0;
    }
    .section,
    .imginner {
        width: 20em;
    }
    .section {
        float: left;
        margin: 0.5em;
        background-color: #eeeeff;
    }
    .fakeimage {
        background-color: #ffeeee;
    }
    .imgouter {
        margin-right: -0.5em;
        background-color: #eeffee;
        margin-bottom: -1.25em; /* minus 1 line-height */
    }
    .imgouter:after {
        content:'\00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0'
    }
    .imginner {
        float: left;
        background-color: #ffffdd;
    }
  </style>
<head>
</head>
<body>
  <div class='section'>
    Some text text text text text text.
    Some text text text text text text.
    <div class='imgouter'>
      <div class='imginner'>
        <div class='fakeimage' style="width:145px; height:92px">
          (image here)
        </div>
      </div>
    </div>
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
  </div>
  <div class='section'>
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
  </div>
</body>
</html>
于 2011-02-14T01:01:21.087 回答
1

在我看来，纯 CSS 解决方案是不可能的。以一张桌子为例。默认情况下，表格单元格有一点填充，因此它的内容是可读的。您可以尝试使每个表格单元格的高度完全正确，但这很难。此外，添加例如底部边框也会增加元素的高度，这意味着您必须考虑到它。我喜欢 Compass 的垂直节奏工具帮助保持垂直节奏的方式，但是对于内联图像和例如表格，我发现缺少纯 CSS。出于这个原因，我编写了一个简单的 jquery 插件来帮助解决这个问题，在这里找到它：https ://github.com/dagomar/rhythm.js

唯一的缺点是要使内联元素起作用，它需要一个偏移量，我还没有弄清楚是否可以自动化。您只能通过测试才能找到偏移量，我发现偏移量 6（默认）最适合 21-24 像素的基线，但可能是字体大小有影响。目前，作为概念验证，我发现它运行得非常好。它也适用于响应式图像（window.resize）。希望这可以帮助。

于 2013-02-23T11:16:15.033 回答
1

如果你想纯粹用 CSS 来做这件事，那么你必须提前知道每个图像的大小。例如，在这个演示中：

截屏

我有一个 20px 的网格，图像的高度为 150px，所以我将图像包裹在一个高度为 160px 的容器中。这需要额外的标记：

<div class=figure>
  <div class=image-wrap style="height:160px">
    <img width=150 height=150>
  </div>
  <p class=caption>Figure 1
</div>

也许这样的标记可以由 WordPress 插件生成，该插件接收图像标记和最小高度并输出网格对齐的div包装器。（我不熟悉 WordPress。）

另一种方法是使用 JavaScript，这已在这个类似的问题中得到解决。

于 2011-02-14T00:56:35.523 回答
1

我不能保证这一切都会奏效，但可能值得一试：

如果您可以保证在 中指定所有图像高度em，则可以将元素的 font-size 设置为img与 相同，line-height以确保所有正确插入的图像的大小都正确：

html
{
  font-size: 15px;
  line-height: 18px;
}

img
{
  font-size: 18px;
  line-height: 18px;
}

或者，您可以尝试在段落中浮动图像，以便以正确的节奏包裹图像。

<p><img ... /> Lorem ipsum dolor sit amet...</p>

最后，你必须疯狂地实现这个方法的纯 CSS：

  1. 计算您正在使用的行距
  2. 确保它出现在整个像素上（否则这将永远无法工作）。
  3. 确保统一指定所有高度：<img height="100"vs<img height="100px"
  4. 写一大堆 CSS 规则：
img[height$="1"]
{
  margin-bottom: 9px;
}
img[height$="2"]
{
  margin-bottom: 8px;
}
...etc...

请注意，这适用于 10 以及 10 和 5 的其他倍数，但对于几乎所有其他东西来说，这将是一个皇家痛苦。

于 2011-02-15T18:27:30.080 回答
1

@PaBLoX，我相信完全有可能仅使用 CSS 来实现垂直节奏。真正的问题是，“你能否仅使用 CSS 创建可重用的垂直节奏样板？”。每个项目都是不同的，使用不同的字体系列等。虽然垂直节奏应该基于输入驱动的数学，但变量会随着每个项目而变化。您可能不需要购物网站上的“博客式”垂直节奏......

无论如何，这个问题被问到已经有一段时间了，但是如果您或其他任何人想要查看为垂直节奏创建样板的示例（尝试），这里是 github 上的 repo：https://github。 com/jonschlinkert/垂直节奏

这是一个起点。我怀疑该项目最终将由几个不同的样板组成，以满足不同的需求。

于 2012-10-20T14:19:03.417 回答
0

我建议使用像 Foundation 或 Bootstrap 和 Compass+SCSS 这样的 CSS 框架来帮助解决这个问题。实际上，我已经做了一些工作来设置 Foundation，它具有一套不错的默认垂直节奏规则，您可以直接使用这些规则。我有一篇博客文章对此进行了解释，并有一个指向 Github 上的拉取请求的链接。

http://lucisferre.net/2012/10/08/getting-into-vertical-rhythm/

有了它，您可以为您的排版和其他页面元素生成一些不错的基础 CSS。或者您可以将该技术应用于现有的 CSS。这有点乏味，但并不是那么难。

于 2012-10-09T04:47:46.087 回答