如何修复图片与文本Div布局问题？固定尺寸宣传卡制作求助

一、容器与内部Div的布局问题（导致Div拆分） #

• 你给.sponsee容器设置了固定宽高，但内部两个Div默认是块级元素，会自动换行，总宽度超过容器宽度，直接导致容器被撑开拆分。必须给容器设置正确的布局方式让两个Div并排：
  • 优先用Flex布局：给.sponsee添加CSS样式 display: flex; overflow: hidden;，这样内部两个Div会在一行排列，且不会超出容器范围。
  • 也可以用浮动方案：给image Div加 float: left;，text Div加 float: left;，同时给.sponsee加 overflow: hidden; 清除浮动，避免容器高度塌陷。
• 确认内部两个Div宽度之和刚好等于容器宽度（106.7+163.5=270.2），只要布局方式正确，就不会出现溢出拆分。

二、Image Div的图片加载与尺寸问题 #

• 图片无法加载：先检查图片路径是否正确，相对路径要和HTML文件的层级对应，比如图片和HTML在同一目录就写 src="logo.jpg"，在子目录就写 src="assets/logo.jpg"；也可以用本地绝对路径测试，排除路径错误。
• 图片撑爆Div：图片默认自带尺寸，可能超出106.7px的限制，给图片加CSS样式：width: 100%; height: 100%; object-fit: cover;（保持比例填充Div，裁剪超出部分）或者 object-fit: contain;（完整显示图片，空白处留空），这样图片就会被限制在Div内部。

三、Text Div内h4与p并排的问题 #

• h4和p默认都是块级元素，本该上下排列，出现并排大概率是被设置了 display: inline; 或 display: inline-block;，检查你的CSS代码，去掉这类样式即可。
• 另外，如果给Text Div加了Flex布局且设置了 flex-direction: row;，也会让子元素并排，改成 flex-direction: column; 或者直接移除Text Div的Flex设置，恢复默认块级排列。

四、打印适配的额外建议 #

• 因为是打印用宣传卡，建议把单位换成pt（打印标准单位），px在不同打印机可能有缩放偏差，换算参考：270.2px≈199pt，106.7px≈78pt，调整后能保证打印尺寸更准确。
• 暂时没确定字体的话，先设置通用字体族过渡，比如 font-family: "Arial", "Helvetica Neue", sans-serif;，后续再替换成指定字体。

内容的提问来源于stack exchange，提问作者John Taylor