用vertical-align: top可解决新闻门户中图片与标题顶部不对齐问题，因<img>默认按基线对齐；配合flex布局、预留图片宽高及语义化标签使用效果更佳。
用 vertical-align: top 解决图片与标题顶部不对齐
头条图和标题在新闻门户里“错位”——图偏下、字偏上，是 <img> 默认按基线（baseline）对齐导致的。哪怕你写了 float: left 或 display: inline-block，只要没动对齐基准，就大概率出问题。
直接加 vertical-align: top 是最轻量、兼容性最好的解法，IE8+ 都支持：
<div class="headline"> <img src="top.jpg" alt="头条图" style="vertical-align: top;"> <h2>突发：启境GT7正式亮相</h2> </div>
- 别用
vertical-align: middle—— 它对的是行高中心，不是容器顶部，容易随字号变化漂移 - 如果父容器用了
font-size: 0清除间隙，记得在<h2>里重设字号，否则标题不显示 - 避免对整个
<img>父容器设line-height: 0，这会影响可访问性（屏幕阅读器可能跳过文字）
用 Flexbox 实现响应式头条区左右结构
News Portal 的头条区常需“左图右标题”，且在小屏变“上图下标题”。用 display: flex 比浮动或绝对定位更稳，也更容易控制对齐逻辑。
关键不是只写 flex，而是明确主轴和交叉轴行为：
立即学习“前端免费学习笔记（深入）”；
.headline {
display: flex;
align-items: flex-start; /* 防止标题被图片高度撑高 */
}
.headline img {
flex-shrink: 0; /* 图片不压缩，避免模糊 */
width: 120px;
height: 80px;
vertical-align: top;
}
.headline h2 {
margin: 0 0 0 12px; /* 左侧留白，不用 padding-left */
}- 必须设
align-items: flex-start，否则默认stretch会让标题高度拉满，破坏阅读节奏 -
flex-shrink: 0很重要——尤其在窄屏下，浏览器默认会压缩图片，导致失真 - 媒体查询中改
flex-direction: column即可切换为竖排，无需重写 HTML 结构
figcaption 和标题混用时的布局陷阱
如果你把头条图包在 <figure> 里，再用 <figcaption> 放标题，会发现它总占一整行、无法和旁边元素并排——因为 <figcaption> 是块级元素，且语义上代表“图的说明”，不是“头条标题”。
新闻门户里，<figcaption> 应该只用于图注（如“图：启境GT7发布会现场”），而非主标题。误用会导致：
- CSS
display: inline-block失效，或需要额外width控制才不换行 - SEO 混淆：搜索引擎可能把
<figcaption>当作次要内容降权 - 无障碍问题：屏幕阅读器会读成“图…说明…”，打断信息流
正确做法是用 <h2> 或 <h3> 承载标题语义，图注另起一行、小字号、灰色，用普通 <p> 包裹。
图片加载未完成时的对齐抖动
头条图通常是异步加载的，初始只有 placeholder 或空白，等图片一进来，高度突变，整个 headline 区域会“跳一下”——用户还没看清标题，页面先晃了。
解决的核心是“预留空间”，而不是靠 JS 监听 load 事件再重排：
- 给
<img>明确写死width和height属性（非 CSS），浏览器能提前算出盒模型 - 配合
aspect-ratio: 3 / 2（现代浏览器），兼顾响应式和防抖动 - 慎用
object-fit: cover而不设宽高——它不改变原始盒尺寸，抖动照旧
这个细节在 News Portal 这类高流量入口页上特别明显：首屏每张头条图都抖一下，用户感知就是“卡”“不专业”。但修复它，往往只需要两行 HTML 属性。
