因为<img>和<form>默认均为块级元素，浏览器强制其垂直堆叠、各占一行，故无法并排；需用flex或grid等现代布局方式实现左右排列。
为什么直接把 <img> 和 <form> 并排放会掉到下一行
因为两者默认都是块级元素，浏览器会强制换行。哪怕你写成 <img><form> 紧挨着，它们也不会并排——<form> 会独占一行，<img> 要么被挤上去（靠 float 或 inline-block 强拉），要么老老实实待在上面或下面。
常见错误现象：图片在左、表单在右，结果表单跑到了图片下方；或者加了 display: inline-block 后，两者之间莫名出现几像素空隙；又或者用 float 后父容器塌陷，背景色/边框消失。
- 别用
float：现代布局中它已过时，容易引发清除浮动、父容器高度丢失等问题 - 别只靠
display: inline-block：文字换行、空白符、vertical-align 默认 baseline 都会导致对不齐 - 优先用
display: flex或display: grid：语义清晰、控制力强、兼容性已足够好（Flex 支持到 IE10+，Grid 到 IE10+ 用旧语法）
flex 布局实现图片与表单左右并排的最小可靠写法
核心是给父容器设 display: flex，再控制子项宽度和对齐。不需要额外 wrapper，也不依赖媒体查询就能响应式起步。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="form-img-container">
<img src="contact.jpg" alt="联系图示">
<form>
<input name="name" placeholder="姓名">
<button type="submit">提交</button>
</form>
</div>
CSS 关键部分：
-
.form-img-container { display: flex; gap: 24px; }——gap比margin更干净，IE 不支持就改用flex-gap的旧写法（justify-content: space-between+ 手动 margin） -
.form-img-container > img { flex: 0 0 300px; height: auto; }—— 固定图片宽度，避免拉伸；flex: 0 0表示不放大不缩小 -
.form-img-container > form { flex: 1; min-width: 0; }—— 表单自动填满剩余空间；min-width: 0是关键，防止长输入框撑破容器（尤其在 Firefox 中）
小屏下让图片上移、表单下移的断点处理
手机竖屏时，图片宽度受限，强行并排会挤压表单控件，导致输入框过窄或按钮换行。这时应主动切换为垂直堆叠。
用媒体查询即可，无需 JS：
- 在
@media (max-width: 768px)内，把父容器改成flex-direction: column - 同时重置图片宽度：
flex: 0 0 100%，保证它撑满容器宽度 - 可选：给图片加
max-width: 100%和height: auto，防原始尺寸过大溢出 - 注意：不要只改
flex-direction就完事——记得同步调gap值，小屏通常需要更小的间距（如gap: 16px）
grid 方案更适合复杂图文混排场景
如果你的“表单”不只是几个输入框，而是带标题、说明、多步骤、甚至嵌套表格的完整模块，grid 比 flex 更可控。
例如：
.form-img-grid {
display: grid;
grid-template-columns: 300px 1fr;
gap: 24px;
}
@media (max-width: 768px) {
.form-img-grid {
grid-template-columns: 1fr;
}
}
优势在于：
- 列宽可精确控制（比如图片固定 300px，表单占剩余所有空间）
- 后续若要插入“右侧辅助说明栏”，只需新增一列，不影响现有结构
- 支持
grid-area命名区域，未来扩展 banner、footer 等区块更直观 - 但注意：IE10/11 只支持旧版 Grid 语法（
display: -ms-grid），需额外前缀或降级方案
真正难的不是写出来，而是图片加载失败时表单还在那儿傻等，或者高 DPR 屏幕下图片模糊却没触发 srcset。这些细节不处理，用户第一眼看到的就是错位或模糊——布局再稳也没用。
