用 display: flex 实现每行宽度不一致的正确方法是父容器设 display: flex 和 flex-direction: column，子元素显式设置不同 width（如 200px、80%），避免使用 float、inline-block 或误用 grid-template-rows。
用 display: flex 控制每行宽度不一致
HTML 本身没有“行”的布局概念，所谓“两行宽度不一样”，实际是让两个块级元素（比如 <div>）在垂直方向排列，但各自宽度独立。最直接可靠的方式是用 <code>display: flex 配合 flex-direction: column，再给每个子元素设不同 width。
常见错误是试图用 <br> 或纯 display: block 强行“换行”，结果发现宽度被父容器或文档流拉齐——因为默认块级元素会自动撑满父宽。
- 父容器加
display: flex和flex-direction: column - 每个子元素显式设置
width，比如width: 200px、width: 80%，不写则继承父宽 - 避免用
float或inline-block模拟多行，它们对宽度控制更难预测
grid-template-rows 不管用？别配错属性
有人试过 display: grid 却发现两行宽度还是相同，问题往往出在混淆了“行高”和“列宽”。grid-template-rows 控制的是高度，不是宽度；真正影响每行内元素宽度的是列轨道（grid-template-columns）或子项的 justify-self/width。
如果你要的是：第一行内容宽 300px，第二行内容宽 100px，那关键不是网格的行定义，而是子元素自身的宽度行为。
立即学习“前端免费学习笔记（深入）”；
- 用
grid时，确保子元素没被默认的justify-items: stretch拉宽（可加justify-self: start） - 或者直接在子元素上写
width，比依赖网格列定义更直观 -
grid-template-rows: 1fr 1fr这类写法只影响高度分配，对宽度毫无作用
用 float 实现？小心清除和塌陷
老项目里偶尔还能见到用 float + clear 模拟“两行”，但这容易引发高度塌陷、父容器无法包裹、响应式失效等问题。它本质是脱离文档流的 hack，不是为“不同宽度的行”设计的。
典型现象：第二行元素突然跑到第一行右侧，或者父容器高度变成 0。
- 必须给每一行末尾加
clear: both的空元素或伪元素，否则浮动会串行 - 浮动元素默认宽度由内容决定，看似“宽度不同”，实则不可控——比如文字换行位置一变，宽度就变
- 现代浏览器中，
float已不推荐用于布局，flex或grid更稳
响应式下宽度不一致更容易出错
当加了媒体查询或使用百分比、vw、max-width 时，“两行宽度不一样”可能在小屏下失效：比如第一行设了 width: 500px，小屏下超出视口，而第二行设了 width: 100%，反而显得更宽。
这不是 bug，是单位语义冲突。固定像素值在小屏上就是刚性约束，而百分比是相对父容器的弹性计算。
- 优先用相对单位：
%、ch、em，或结合min-width/max-width - 测试时真机缩放或用 Chrome DevTools 的 device toolbar，别只看桌面窗口缩放
- 如果必须用像素值，记得加
overflow-x: auto或scrollbar-gutter: stable防止横向溢出破坏布局
真正麻烦的不是怎么让两行宽度不同，而是不同设备、不同字体渲染、不同用户缩放比例下，那个“不同”是否还符合预期。宽度是视觉结果，不是代码指令——你写的 width 只是起点。
