必须用语义化 div + css（推荐 flexbox 或 grid）替代 table 布局微博页面，否则无法满足响应式、无障碍、seo 及现代 css 特性支持等基本要求。
直接用 table 做微博页面是过时且不可维护的，现在必须用语义化 div + CSS（推荐 Flexbox 或 Grid），否则连基础响应、无障碍、SEO 都不达标。
为什么不能继续用 table 布局微博结构
早期作业里大量出现 <table width="990"> 这类写法，本质是把表格当布局工具——这违反 HTML 语义，也导致以下问题：
<ul>
<li>
<code>table 无法响应式：固定宽度、colspan/rowspan 在小屏上必然错位或横向滚动
tr 里嵌 td 再套 div 容易触发重排（reflow）gap、place-items、aspect-ratio）对 table 元素基本无效
Flexbox 实现微博动态列表最简结构
每条微博用一个 <article></article> 包裹，内部头像、正文、操作栏用 display: flex 垂直堆叠+水平对齐，比浮动更稳：
<article class="weibo-item"><div class="weibo-header">
@@##@@
<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 src="avatar.jpg" alt="用户头像" class="avatar"> </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"></button>，不能用 <div> 或 <code><span></span> 模拟，否则键盘 Tab 焦点跳过、屏幕阅读器无法识别操作意图。
