index.html怎么实现左右分栏布局？-html教程-PHP中文网

css grid 是现代浏览器下实现左右分栏最直接可靠的方式，推荐 grid-template-columns: 250px 1fr 并设置 body { margin: 0; height: 100vh; display: grid; }，避免因高度缺失或默认 margin 导致布局异常。

index.html怎么实现左右分栏布局？

用 CSS Grid 实现左右分栏，最直接可靠

现代浏览器下，display: grid 是实现左右分栏最干净的方式，不需要浮动、清除或额外 wrapper 元素。关键在于把 body 或容器设为 grid，并定义两列轨道。

常见错误是只写 grid-template-columns: 1fr 1fr 却忘了设置 height 或内容撑不满导致右侧“看不见”；或者用 minmax() 却没限制最小宽度，小屏下崩成一列。

grid-template-columns: 250px 1fr —— 左侧固定 250px，右侧自适应（推荐大多数后台/文档类页面）
grid-template-columns: 1fr 2fr —— 左右按比例分配，但需注意内容多时右侧可能过宽
必须给父容器设 height: 100vh 或明确高度，否则 grid 不会拉满视口
在 index.html 中，直接对应用 grid 有时会和默认 margin 冲突，建议加 body { margin: 0; }

<style>
  body {
    margin: 0;
    display: grid;
    grid-template-columns: 250px 1fr;
    height: 100vh;
  }
  .sidebar { background: #f0f0f0; }
  .main { padding: 1rem; overflow-y: auto; }
</style><aside class="sidebar">菜单</aside><main class="main">内容区</main>

Flexbox 也能做，但要注意主轴方向和收缩行为

如果项目要兼容 IE10+，display: flex 是更稳妥的选择。但得小心 flex-shrink 默认为 1 —— 当内容窄于容器时，左侧栏可能被压缩变形。

典型问题：左侧导航文字换行错乱、图标挤在一起，其实是 flex-shrink: 1 在作祟；或者没设 min-width，缩放窗口时左侧突然塌陷。

给左侧元素加 flex: 0 0 250px（即不伸缩、不收缩、基础宽度 250px）
右侧用 flex: 1 占满剩余空间，比 flex: 1 1 auto 更可控
必须设 html, body { height: 100% }，否则 height: 100% 在 flex 容器里无效
IE 下 flex: 1 有 bug，建议显式写 flex: 1 1 0

不要用 float 实现左右分栏，现在真没必要

虽然 float: left + overflow: hidden 还能跑，但它的根本问题是脱离文档流 —— 后续元素定位不可预测，清浮动代码容易漏，响应式切换列数时几乎要重写。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

真实踩坑场景：加了 position: sticky 的侧边菜单，在 float 布局里失效；或者右侧用了 transform 动画，结果整个布局偏移。

float 布局下，height 无法继承，100vh 在子元素上基本等于没写
没有 gap 控制，左右间距得靠 margin 硬调，响应式时维护成本高
Flex/Grid 已覆盖 98%+ 浏览器（包括 Android 4.4+ 和 iOS 9+），没必要为旧版本妥协

响应式断点怎么加？别只改 column 数量

单纯在媒体查询里把 grid-template-columns 改成 1fr 只是让列变单列，但用户真正需要的是“折叠侧边栏”，而不是让它消失或堆在顶部。

容易忽略的点：移动端点击展开菜单后，遮罩层 z-index 是否盖住内容；或者用 visibility: hidden 隐藏侧边栏，却忘了它仍占 layout 空间。

用 transform: translateX(-100%) + transition 实现滑入滑出，比 display: none 更顺滑
左侧栏加 width: 250px 和 flex-shrink: 0（flex）或 min-width: 250px（grid），避免缩放时内容挤压
在 @media (max-width: 768px) 里，把 grid-template-columns 改为 1fr，同时给 .sidebar 加 position: fixed 和 inset: 0 实现抽屉效果