是否可能只使用css保持垂直节奏？ [英] Is it possibly to keep vertical rhythm using only css?
问题描述
我正在开发一个排版导向的wordpress主题[1]，并且在线图像遇到麻烦。
I'm developing a typography oriented wordpress theme[1], and I'm getting troubles with the in-line images.
我可以控制每个元素调整它的线高，底边距，ecc，保持垂直节奏。但是由于通过编辑器粘贴的图片可以有任何高度，它们显然会破坏以下所有内容。
I can control every element and adjust it's line height, bottom margin, ecc, to keep the vertical rhythm. But since images pasted through the editor can have any height, they obviously disrupt all the following content.
所以问题是如果可能使用margin，padding，解决方案，以确保独立于图像大小，它将调整到基线。
So the question is if it's possible using margin, padding, both or another solution, to make sure that independent of the image size it will adjust to the baseline.
我知道有一些替代品，如使所有图像转为行的倍数高度，这样我可以保持节奏。其他选项将使用javascript，不理想，但如果没有css解决方案，我必须考虑它。
I know there are some alternatives like make all images turn to a multiple of the line height, that way I can keep the rhythm. Other option would be use javascript, not ideal, but if there's no css solution, I'll have to consider it.
[1]正如你可以看到，这是
[1] As you can see, this is a css related issue rather than a wordpress one, that's why I'm posting this question here.
推荐答案
（编辑 - 新的），这是一个css相关的问题，而不是一个wordpress的问题，这就是为什么我在这里发布这个问题。和改进的解决方案）
(edited -- new and improved solution)
我不知道WordPress是否提供任何方法来生成图像的封装div，但如果它，那么这应该工作。它在面对不同的文本缩放和图像大小时是相当鲁棒的，虽然您可能需要根据图像的高度或缩短趋势来调整交替空格和不间断空格的生成内容字符串的长度。
I don't know if WordPress provides any way to generate wrapper divs around images, but if it does, then this should work. It is fairly robust in the face of different text scales and image sizes, though you may need to adjust the length of the generated-content string of alternating spaces and non-breaking spaces, depending on how tall or short your images tend to be.
这种方式的工作原理是，它使用负边距，使外部图像包装器比内部包装器更宽，因此一个不间断的空间将适合将出现一个换行之前的行，然后生成一个交替的非中断和正常空格的字符串，其在向右边缘向下填充一行，然后溢出到下面的行上。最后，等于一行高的负边距会抵消图片下方部分填充的空格行。
The way this works is that it uses a negative margin to make the outer image wrapper just enough wider than the inner wrapper, so that one non-breaking space will fit on one line before a wrap will occur, and then it generates a string of alternating non-breaking and normal spaces that fills up one line at a time down the right edge, before spilling onto the line below. Finally, a negative margin equal to one line-height counteracts the partially-filled line of spaces below the image.
<!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保持垂直节奏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
