Question

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

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

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

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

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

Answer 1

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

我不知道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>

Answer 2

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

screenshot http://f.cl.ly/items/0l2N0o0T011A0u2j012M/Screen%20shot%202011-02-13%20at%2019.46.16.png

我有一个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，this similar question已经解决了这个问题。

Answer 3

我不能保证任何一项都能奏效，但值得一试：

如果您可以保证在em中指定所有图片高度，则可以将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你将不得不疯狂地实施这种方法：

计算您正在使用的行间距
确保它出现在整个像素上（否则这将无法工作）。
确保统一指定所有高度：<img height="100" vs <img height="100px"
写一些淫秽的CSS规则：

img[height$="1"]
{
  margin-bottom: 9px;
}
img[height$="2"]
{
  margin-bottom: 8px;
}
...etc...

注意，这适用于10和10和5的其他倍数，但对于其他所有事情来说，这将是一种皇家的痛苦。

Answer 4

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

无论如何，问这个问题已经有一段时间了，但是如果你或其他任何人想要看到一个例子（尝试）来创建一个垂直节奏的样板，那么这里是github上的回购：{{3 }}

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

Answer 5

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

唯一的缺点是内联元素可以工作，它需要一个偏移，我还没想到它是否可以自动化。您只能通过测试找到的偏移量，我发现偏移量为6（默认值）对于21-24像素的基线效果最佳，但可能是字体大小有影响。就目前而言，作为概念证明，我发现它的效果非常好。它也适用于响应式图像（window.resize）。希望这会有所帮助。

Answer 6

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

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

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

是否可以仅使用css保持垂直节奏？

6 个答案: