推荐用Grid而非float或flex做新闻双栏：float易塌陷错位，flex会强行等高破坏阅读节奏；Grid通过grid-template-columns: minmax(280px, 35%) 1fr + gap: 1.5rem实现自适应列宽与紧凑间距。

为什么不用 float 或 flex 做新闻双栏？

因为新闻页面的左右栏内容长度天然不均——左侧常是固定高度的作者信息、标签云、时间线，右侧是动态长度的正文段落。用 float 容易塌陷、换行错位；flex 默认 align-items: stretch 会强行拉高短栏，破坏阅读节奏。Grid 的列宽控制 + 内容自适应高度，才是解法。

grid-template-columns 怎么设才不翻车？

别写死像素值（如 300px 700px），也别只用百分比（30% 70%）应付所有屏幕。推荐组合写法：

• grid-template-columns: minmax(280px, 35%) 1fr：左侧最小 280px（保名片卡可读），最大占 35%，右侧自动填满剩余空间
• 加 gap: 1.5rem 控制间距，比 2rem 更紧凑，符合新闻排版呼吸感
• 小屏切单栏必须加 @media (max-width: 768px)，且内部用 grid-template-columns: 1fr，不是 auto——后者在 Safari 里可能失效

语义化标签怎么嵌套才不影响 SEO 和朗读顺序？

双栏不是视觉分区，而是内容职责分离。错误做法：把整个左栏包进

，右栏全塞

。正确结构是：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 每条新闻用独立的
  包裹，含
  （标题+时间）、
  （正文）、
  （仅放该新闻特有的关联人物/数据源）
• 左侧全局信息（如编辑部简介、联系方式）放在
  ，并确保它在 DOM 顺序上位于
  之前——VoiceOver 会按此顺序朗读
• 避免在
  内部再用
  放广告或推荐，改用
  + 显式 aria-label

  图片和文字混排时 CLS（布局偏移）怎么压到 0？

  新闻页首屏一动就跳，90% 是图片没控死尺寸。关键不是“加 loading”，而是让浏览器提前知道占位空间：

  • 每张 必须带真实 width 和 height 属性，不能靠 CSS 拉伸，否则加载瞬间重绘
  • 后端图尺寸不可控？用 aspect-ratio: 16 / 9 替代，但要加降级：height: 0; padding-bottom: 56.25%;（16:9 的百分比）+ position: relative，再把 绝对定位撑满
  • loading="lazy" 只加给 ，别加给背景图（CSS background-image 不支持原生懒加载）

  真正难的不是写两列，是让左侧的「相关链接」区块在右侧正文滚动时保持视觉锚定，又不触发 position: sticky 在 iOS 上的 repaint bug——这得靠容器 contain: layout style 配合 will-change: transform 微调，但多数新闻页其实不需要，优先保证 DOM 结构干净比强行吸顶更重要。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！