HTML网页中如何使用div标签进行页面布局-html教程-PHP中文网

div标签没有任何内置布局能力，它只是个“空盒子”，所有三栏、居中等效果均依赖css的display、flex、grid或float实现；必须显式设置css才能生效，且应优先使用nav、article等语义化标签替代。

html网页中如何使用div标签进行页面布局

div 本身不负责布局，只提供语义容器

直接说结论：div 标签没有任何内置布局能力，它只是个“空盒子”，连默认边距、内边距、宽度高度都没有。你看到的三栏、居中、响应式效果，全是靠 CSS 的 display、flex、grid 或 float 实现的，不是 div 自己会排版。

常见错误现象：

写了 5 个 div，没加任何 CSS，页面垂直堆成一柱子
给 div 加了 width: 300px 却没生效（忘了父容器限制或未设 display: block）
嵌套十层 div，调试时找不到哪个在撑开空白

使用场景很明确：需要包裹一段无特定语义的内容，比如广告位、弹窗容器、JS 动态插入区域。别用它替代 nav、article、aside——读屏软件和搜索引擎不认 div 的含义。

用 div + flex 布局时必须设 display: flex

现在所谓“flex 布局”，本质是给某个 div 加 display: flex，让它变成 flex 容器；子 div 自动成为 flex 项目，不需要额外声明。

关键点：

父级 div 必须显式设 display: flex 或 display: inline-flex，否则所有 justify-content、align-items 都无效
子元素如果是 span 等 inline 元素，得先设 display: block 或 display: flex，否则不参与 flex 流
flex-wrap: wrap 容易被忽略——默认不换行，内容超宽就溢出或压缩，不是自动折行
混用 float 会导致部分子项脱离 flex 流，直接失效

示例：

Html2md

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

下载

<div class="container">
<br><div>A</div>
<br><div>B</div>
<br>
</div>

CSS：

.container {<br>  display: flex;<br>  flex-wrap: wrap;<br>  justify-content: center;<br>}

用 div + grid 布局时必须定义网格线

div 做 grid 容器很常见，但两个基础动作常被跳过：必须显式定义列/行，且子项要么靠自动流排布，要么靠 grid-area 显式定位——它不会像表格那样“自动对齐”。

常见翻车点：

父 div 加了 display: grid，但没写 grid-template-columns，结果所有子 div 挤在第一列
子 div 设了 grid-column: 2 / 4，而父容器只有 3 列，导致错位或消失
在 grid 容器里又给子 div 加 float 或 position: absolute，直接脱离网格流

底线要求：
至少写 grid-template-columns: 1fr 1fr 1fr 或 grid-template-columns: 1fr，哪怕只有一列也比不写强。
grid-column-start 和 grid-column-end 的值不能超过定义的列数，否则行为不可控。