是否可以仅使用css保持垂直节奏？
Pab*_* C. 9 javascript css typography vertical-rhythm
我正在开发一个以排版为导向的wordpress主题[1],我在线图像遇到了麻烦.
我可以控制每个元素并调整它的线高,底边距,ecc,以保持垂直节奏.但是,由于通过编辑器粘贴的图像可以具有任何高度,因此它们显然会破坏以下所有内容.
所以问题是,是否可以使用边距,填充,两者或其他解决方案,以确保独立于图像大小,它将调整到基线.
我知道有一些选择,比如让所有图像变成线高的倍数,这样我就可以保持节奏.其他选择是使用javascript,不理想,但如果没有css解决方案,我将不得不考虑它.
[1]正如你所看到的,这是一个与css相关的问题,而不是一个wordpress问题,这就是我在这里发布这个问题的原因.
(编辑 - 新的和改进的解决方案)
我不知道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>
如果你想纯粹使用 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，这已在类似的问题中得到解决。
| 归档时间： |
|
| 查看次数： |
1862 次 |
| 最近记录： |