商品主图与描述应采用flex布局：父容器设display: flex、align-items: flex-start，图片固定宽+max-width:100%、height:auto，文字侧flex:1自适应，并在移动端切为column方向。
商品主图和描述怎么对齐才不显乱
图片和文字左右不对齐、间距忽大忽小，是商品详情页最常被忽略的视觉断点。关键不是用 float 硬推，而是用 CSS 的 display: flex 或 grid 控制容器级关系。
推荐用 flex：父容器设 display: flex; align-items: flex-start;，图片侧固定宽度（如 width: 480px），文字侧用 flex: 1 自适应。注意图片必须加 max-width: 100% 和 height: auto，否则在小屏上会溢出。
- 别给图片外层再套多余
div，容易多一层 margin 或 padding 干扰对齐 - 如果描述里有
h2、p、ul混排，统一设margin-top: 0防止首行空隙过大 - 移动端建议直接切为上下结构：用
@media (max-width: 768px)把flex-direction改成column
价格和购买按钮怎么放才促转化
价格不是越醒目越好，而是要和用户决策路径匹配。放在图片右侧紧邻位置，比堆在底部更有效；购买按钮必须有明确层级——价格是信息，按钮是动作，两者视觉权重不能倒置。
结构上，把价格和按钮包进同一个语义化容器，比如 <aside class="price-action">，而不是散落在不同 div 里。这样方便后续用 JS 统一控制库存状态（如缺货时禁用按钮、灰掉价格）。
立即学习“前端免费学习笔记（深入）”；
- 价格数字用
<span class="price-num">¥199</span>单独包裹，方便后期加动画或动态更新 - 按钮必须带
type="button"（非submit），避免误触表单提交 - 禁用态不要只靠
opacity: 0.5，要加pointer-events: none和cursor: not-allowed，否则移动端仍可点击
图片描述怎么写 HTML 才利于 SEO 和读屏器
alt 属性不是可填可不填的字段，它是图片的语义替代。纯装饰图用 alt=""，商品图必须写具体描述，比如 alt="Apple AirPods Pro 第二代，白色，主动降噪，入耳式无线耳机"，而不是 alt="耳机1"。
描述段落别堆砌关键词。用自然句式分层表达：先核心属性（品牌、型号），再功能亮点（降噪、续航），最后使用场景（通勤、健身）。每个 p 标签只讲一个点，别塞进一个长段落里。
- 避免在
alt里写“图片”“图标”“logo”这类冗余词，读屏器已自动播报元素类型 - 如果有缩略图切换逻辑，主图的
src必须是最终选中的那张，不要用占位图 + JS 替换 - 多图轮播时，每张图都要有独立且准确的
alt，不能所有图共用一个
购买区域响应式失效的三个典型原因
按钮在 iPhone 上变小、价格文字折行错位、右侧留白异常……这些问题八成不是媒体查询没写，而是布局模型本身不兼容弹性缩放。
最常见的是用了固定像素值卡死尺寸：比如按钮设了 width: 200px，图片设了 width: 480px。这些值在大屏看着正常，到小屏就撑破容器。应该用相对单位：max-width: 100%、flex-basis 替代 width、按钮用 min-width 而非 width。
- 检查是否对
html或body错误设置了font-size: 62.5%，这会让rem基准偏移，导致整个购买区尺寸失真 - 避免在购买按钮上直接写
style="margin-left: 80px"这类内联样式，它会覆盖媒体查询里的margin设置 - 真机调试时注意 iOS Safari 对
position: sticky的兼容性差，别用它来“吸顶”购买栏
真正难的不是写出能显示的结构，而是让价格、按钮、图片三者在任意设备上都保持可信的视觉权重关系——这点容易被当成 UI 问题，其实根子在 HTML 元素嵌套是否语义清晰、CSS 布局模型是否留有弹性余量。
