带顶栏的S形首字下沉图片CSS布局：适配EPUB文本覆盖需求

根据需求，以下是不使用position:absolute、适配多设备的CSS实现方案，核心利用浮动和负边距实现文本对齐与覆盖效果：

最终代码 #

HTML（移除行内样式，保持原有结构） #

<p class="dropcap-para">
  <img src="image002.jpg" alt="dropcap S" class="dropcap-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>
</p>

CSS #

/* 基础段落样式，统一行高确保多设备一致性 */
.dropcap-para {
  line-height: 1.5em;
  overflow: hidden; /* 清除浮动，避免容器高度塌陷 */
}

/* 首字下沉图片样式 */
.dropcap-img {
  float: left;
  height: 4.5em; /* 设为3倍行高，刚好覆盖三行文本 */
  width: 5.625em; /* 按原图片135:108的宽高比计算：4.5em × (135/108) */
  margin-right: 0.25em; /* 文本与图片间留小间距，提升可读性 */
}

/* 文本容器样式 */
.funky-text {
  display: block;
  margin-top: -3em; /* 图片高度减去1倍行高，让首行对齐图片底部 */
}

方案说明 #

1. 浮动布局：通过float:left让图片靠左，文本自然环绕图片空间。
2. 相对单位适配：全部使用em单位，随字体大小自动缩放，适配不同设备的屏幕尺寸。
3. 首行精准对齐：负margin-top让文本整体上移，首行基线刚好对齐图片底部。
4. 空白区域覆盖：上移后的文本自动填充图片顶部空白，前三行完全覆盖图片范围；第四行因图片高度仅占三行空间，自动对齐页面边距。
5. EPUB兼容性：未使用position:absolute等受限属性，适配主流EPUB阅读器。

调整建议 #

• 若修改行高，同步更新图片高度（行高×3）和负边距值（图片高度-行高）。
• 若图片宽高比变化，重新计算width值：图片高度 × (原图片宽度/原图片高度)。

内容的提问来源于stack exchange，提问作者Ross Presser