精选HTML两列自适应高度的文本块代码-html教程-PHP中文网

用float实现两列自适应高度会失效，因为float元素脱离文档流，父容器无法自动撑高，导致后续元素上移、背景或边框“消失”，左右列底部无法对齐；现代推荐用flex（ie10+，默认align-items:stretch等高）或grid（响应式更直接，如@media切换单双列），避免table模拟。

精选html两列自适应高度的文本块代码

为什么用 float 实现两列自适应高度会失效

因为 float 元素脱离文档流，父容器无法自动撑高，导致后续元素上移、背景或边框“消失”。常见现象是右侧列内容很长，左侧列却只显示几行，底部对不齐。

解决思路不是强行清浮动（clear: both），而是让容器感知子列高度。现代写法优先用 display: flex 或 display: grid，它们天然支持等高布局。

flex 兼容性好（IE10+），适合简单两列，且默认 align-items: stretch 就能拉齐高度
grid 更灵活（如响应式断点切换单列），但 IE 支持弱（仅 Edge 16+）
避免用 table 模拟——语义错误、响应式难、SEO 不友好

Flex 实现两列等高：最简可靠写法

核心就三行 CSS，不用 JS、不依赖固定高度：

div.container {
  display: flex;
}
div.left, div.right {
  flex: 1; /* 等宽；也可写 flex: 0 0 300px 控制宽度 */
}

注意：flex: 1 是 flex-grow: 1 的简写，它让两列按比例分配剩余空间，同时保持高度同步。如果一列内容少，它不会塌缩——这是和 inline-block 的关键区别。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

父容器必须设 display: flex，否则子项的 flex 属性无效
不要给子列设 height: 100%，这反而可能因父容器无显式高度而失效
若需间隙，用 gap: 20px（推荐），而非 margin——后者会破坏等高逻辑

Grid 布局处理响应式断点

当需要「PC 两列、手机单列」时，grid 比 flex 更直接：

@media (max-width: 768px) {
  div.container {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media (min-width: 769px) {
  div.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

这里没用 grid-template-areas 或命名线，是因为纯文本块不需要复杂区域划分。用 1fr 1fr 比 50% 50% 更安全——百分比在某些嵌套场景下会计算错误，而 fr 单位始终按可用空间分配。