CSS 首字下沉图像，文本在空白部分对齐
P粉415632319
2023-09-05 21:42:04
<p>我认为这不是日常的 dropcap 情况。</p>
<p>我的大写字母“S”是这样的图像：</p>
<p>请注意，实际图像一直延伸到上栏。顶栏是<strong>同一图像的一部分，其中包含大 S 和 S 左侧的图画。</strong>我将背景着色为蓝色，以便在这里可以轻松看到它，但自然色是白色。 <em>（但是请忽略最顶部的额外灰色区域，这是进行屏幕捕获时的笨拙。）</em> <strong>我不想破坏顶栏和图像。提供给我的图像如图所示 - 一个矩形区域，右上角绘制了一个顶栏，顶栏下方有空白。</strong></p>
<p>我希望文本看起来像这样（使用paint.net创建）：</p>
<p>请注意，第一行文本与首字大写“S”的底部对齐；前三行位于图像中白色区域的顶部，第四到第六行与页边距左对齐。</p>
<p>另请注意，<strong>文本必须覆盖图像的白色部分</strong>。</p>
<p>另请注意，我无法保证总文本宽度；这将是一个 EPUB，可以在多个设备上查看。因此绝对应该避免 <code>position:absolute</code>。</p>
<p>这是我迄今为止尝试过的 HTML，几乎完全删除了相关 CSS：</p>
<pre class="brush:php;toolbar:false;"><p class="dropcap-para">
<img width=135 height=108 style="float:left" src="image002.jpg" alt="dropcap S"></img>
<span class="funky-text">HE ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></pre>
<p>谢谢。</p>
不可能给出具体的值，因为没有测量“S”在实际图像中的位置。以下图像用于示例 A 中，并且在示例 B 中使用相同的技术将新图像添加到 OP 中。
.foreground是浮动的，段落的文本环绕在它周围。.background位于所有内容下方，以便.foreground覆盖.background的 150 像素，并且段落文本位于之上。背景。示例中注释了重要的规则集
示例 A
/* The font-size on html or :root will be default size for 1rem. The values will vary with font-size (2.25ch), font-family, and dimensions of image. */ html { font: 2.25ch/2 "Segoe UI" /* 2 line-height for line spacing */; } article { margin-top: -250px /* Moves it up the height of the image */; } img { display: block /* Makes all tags behave uniformly first */; } .foreground { float: left /* This image sits on top of .background */; } .background { position: relative /* Takes image out of the normal "flow" */; top: 250px /* Moves it down the height of .foreground */; z-index: -1 /* Moves it below everything on the z axis */; } p { padding-top: 135px /* Moves it down so the first line is aligned to "S" */; }示例 B
/* The font-size on html or :root will be default size for 1rem. The values will vary with font-size (2.55ch), font-family, and dimensions of image. */ html { font: 2.55ch/1.6 "Segoe UI" /* 1.6 line-height for line spacing */; } article { margin-top: -12.3rem /* Moves it up the height of the image */; } img { display: block /* Makes all tags behave uniformly first */; } .foreground { float: left /* This image sits on top of .background */; margin-top: 2.5rem; } .background { position: relative /* Takes image out of the normal "flow" */; top: 12.3rem /* Moves it down the height of .foreground */; z-index: -1 /* Moves it below everything on the z axis */; } p { padding-top: 6.6rem /* Moves it down so the first line is aligned to "S" */; }由OP编辑： 我已经编辑了这个答案，它非常接近我想要的，以匹配我的确切用例。
其中一个汽车 S.O.建议的网络链接（“vertical-align-text-next-to-an-image”）提供了想法（以及另一个链接（epub 知识)。
我们发布的这个示例使用了变换翻译。
谈到电子书时，还有其他因素需要考虑...... 请记住，电子书用户可以更改“可重排”电子书中的字体大小（我们认为这是您的目标）。每个电子书阅读器可能会以不同的方式设置他们喜欢的字体大小。您也需要考虑这个因素。也许读者可能会选择一系列针对各种潜在字体大小的 @media 命令。此示例在 FF、Chrome、Edge 中进行了测试。
要进一步准备以适合您的项目：
html, body { font-family: Arial, sans-serif; font-size: 1em; line-height: 1.4; } * { box-sizing: border-box; } .first { font-family: Arial, sans-serif; font-size: 1em; line-height: 1.4; margin: 0 0 0 0; } .dropcap { float: left; font-family: Arial, sans-serif; font-size: 5em; line-height: 1; margin-bottom: -0.5em; /*-- move margin after moving the image --*/ margin-right: -0.95em; margin-top: -0.1em; position: relative; /*-- move image up/down --*/ top: 40%; transform: translateY(-40%); } .bgi { background-image: url("https://i.stack.imgur.com/JlxL1.png"); z-index: -1; background-size: cover; background-repeat: no-repeat; background-position: center center; box-sizing: border-box; /*-- set image size --*/ width: 135px; height: 108px; }