我正在开发一个面向排版的 WordPress 主题，但我遇到了内嵌图像的问题。
我可以控制每一个元素并调整它的行高、底边距等，以保持垂直节奏。但是由于通过编辑器粘贴的图像可以有任意高度，它们显然会扰乱以下所有内容。
是否可以使用边距、填充、两者或其他解决方案来确保独立于图像大小将调整到基线？
我知道有一些替代方案，比如让所有图像变成行高的倍数，这样我就可以保持节奏。其他选择是使用 JavaScript，不太理想，但如果没有 CSS 解决方案，我将不得不考虑。
最佳答案
(已编辑——新的和改进的解决方案)
我不知道 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>
关于javascript - 是否可以仅使用 CSS 保持垂直节奏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4986944/