HTML 布局元素和技术
❮ 上一页 下一页 ❯
网站通常以多列显示内容（像杂志或报纸）。
示例
城市
London
巴黎
东京
London
伦敦是英格兰的首都。它是英国人口最多的城市，都市区有超过 1300 万居民。
伦敦坐落在泰晤士河畔，两千年来一直是一个重要的定居点，其历史可以追溯到罗马人建立并将其命名为伦敦尼亚姆。
页脚
自己动手试一试 »
HTML 布局元素
HTML 有几个语义元素，用于定义网页的不同部分
您可以在我们的 HTML 语义化章节中阅读更多关于语义元素的信息。
HTML 布局技术
有四种不同的技术可以创建多列布局。每种技术都有其优缺点
CSS 框架
CSS float 属性
CSS flexbox
CSS grid
CSS 框架
如果您想快速创建布局，可以使用 CSS 框架，例如 W3.CSS 或 Bootstrap。
您听说过 W3Schools Spaces 吗？在这里，您可以从零开始创建您的网站或使用模板，并免费托管它。
立即免费开始 ❯
* 无需信用卡
CSS 浮动布局
使用 CSS float 属性进行整个网页布局很常见。浮动很容易学习——您只需要记住 float 和 clear 属性的工作原理。缺点：浮动元素与文档流绑定，这可能会损害灵活性。在我们的 CSS 浮动与清除章节中了解更多关于浮动的信息。
示例
城市
London
巴黎
东京
London
伦敦是英格兰的首都。它是英国人口最多的城市，都市区有超过 1300 万居民。
伦敦坐落在泰晤士河畔，两千年来一直是一个重要的定居点，其历史可以追溯到罗马人建立并将其命名为伦敦尼亚姆。
页脚
自己动手试一试 »
CSS Flexbox 布局
使用 flexbox 可确保在页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素的行为可预测。
在我们的 CSS Flexbox 章节中了解更多关于 flexbox 的信息。
示例
城市
London
巴黎
东京
London
伦敦是英格兰的首都。它是英国人口最多的城市，都市区有超过 1300 万居民。
伦敦坐落在泰晤士河畔，两千年来一直是一个重要的定居点，其历史可以追溯到罗马人建立并将其命名为伦敦尼亚姆。
页脚
自己动手试一试 »
CSS Grid 布局
CSS 网格布局模块提供了一个基于网格的布局系统，包含行和列，使网页设计更容易，而无需使用浮动和定位。
在我们的 CSS Grid 简介章节中了解更多关于 CSS grid 的信息。
❮ 上一页 下一页 ❯
★ +1
W3schools 学习路径
跟踪您的进度 - 免费！
登录 注册