必须用语义化 div + CSS（推荐 Flexbox 或 Grid）替代 table 布局微博页面，否则无法满足响应式、无障碍、SEO 及现代 CSS 特性支持等基本要求。
直接用 table 做微博页面是过时且不可维护的，现在必须用语义化 div + CSS（推荐 Flexbox 或 Grid），否则连基础响应、无障碍、SEO 都不达标。
为什么不能继续用 table 布局微博结构
早期作业里大量出现 <table width="990"> 这类写法，本质是把表格当布局工具——这违反 HTML 语义，也导致以下问题：
-
table无法响应式：固定宽度、colspan/rowspan在小屏上必然错位或横向滚动 - 屏幕阅读器会把整块微博内容读成“表格”，逻辑混乱，残障用户无法理解“这是条动态，不是数据表”
- 后续加 JS 交互（比如展开评论、点赞状态切换）时，DOM 路径深、选择器难写，
tr里嵌td再套div容易触发重排（reflow） - 所有现代 CSS 布局特性（
gap、place-items、aspect-ratio）对table元素基本无效
Flexbox 实现微博动态列表最简结构
每条微博用一个 <article> 包裹，内部头像、正文、操作栏用 display: flex 垂直堆叠+水平对齐，比浮动更稳：
<article class="weibo-item">
<div class="weibo-header">
<img src="avatar.jpg" alt="用户头像" class="avatar">
<div>
<strong>张三</strong>
<span class="time">2小时前</span>
</div>
</div>
<p class="weibo-content">今天开会迟到了，但老板没发现…</p>
<div class="weibo-actions">
<button>转发</button>
<button>评论</button>
<button>赞</button>
</div>
</article>
CSS 关键部分：
立即学习“前端免费学习笔记（深入）”；
-
.weibo-header设display: flex; align-items: center;，头像左对齐，文字信息靠左撑开 -
.weibo-actions设display: flex; gap: 12px;，按钮自动等距，不用算margin - 整个列表外层用
flex-direction: column; gap: 16px;控制条间距，比margin-bottom更可控
图片和文字混排时常见错位怎么修
微博正文里常插图，用 float: left 是老办法，但容易导致父容器高度塌陷、文字换行错乱。正确做法：
- 给图片加
max-width: 100%; height: auto;，防止溢出容器 - 用
display: flex把图文包裹在同一个子项里：<div class="content-with-img"><p>文字</p><img></div>，再设flex-wrap: wrap和align-items: flex-start - 避免用
vertical-align: middle对齐图文——它只对 inline 元素有效，且基准线不稳定；改用display: grid; align-items: start;
特别注意：如果图片是用户上传的，原始尺寸差异大，务必加 object-fit: cover; 配合固定宽高容器，否则拉伸变形。
textarea 发微博框的几个硬性要求
学生作业常忽略输入体验，但真实微博框必须处理好这几件事：
- 默认高度要够（建议
min-height: 80px），不能只设height锁死 - 必须加
resize: vertical;，禁用水平拉伸，否则破坏布局 - 字符计数要实时更新，用
input事件监听，别用change（后者只在失焦时触发） - 粘贴长文本时，需用
setTimeout延迟计算，避免卡顿；可配合getBoundingClientRect()动态调整高度
最后提醒：所有图标（转发/评论/赞）必须用 <button type="button">，不能用 <div> 或 <span> 模拟，否则键盘 Tab 焦点跳过、屏幕阅读器无法识别操作意图。
