❮ 上一节
下一节 ❯
HTML 布局 - 元素和技巧
网站常常以多列显示内容（就像杂志和报纸）。
实例
城市
伦敦
巴黎
东京
伦敦
伦敦是英格兰的首都。 它是英国人口最多的城市，拥有超过 1300 万居民的大都市区。
伦敦位于泰晤士河畔，两千年来一直是主要定居点，其历史可追溯至罗马人建国，并将其命名为 Londinium。
页脚
亲自试一试 »
HTML 布局元素
网站常常以多列显示内容（就像杂志和报纸）。
您可以在我们的 HTML 语义 一章中阅读更多关于语义元素的内容。
HTML 布局技巧
创建多列布局有四种不同的技术。每种技术都有其优缺点:
CSS frame 框架
CSS float 浮动布局
CSS flexbox 盒子
CSS grid 网格
CSS 框架
如果你想快速创建布局，你可以使用CSS框架，比如 W3.CSS 或 Bootstrap。
CSS Float 浮动布局
使用 CSS float 属性进行整个 web 布局是很常见的。
float 很容易学习-您只需要记住:float和 clear属性是如何工作的。
缺点: 浮动元素与文档流绑定，这可能会损害灵活性。在 CSS
Float 和 Clear 章节中了解更多关于浮动的信息。
实例
Cities
伦敦
巴黎
东京
伦敦
伦敦是英格兰的首都。 它是英国人口最多的城市，拥有超过 1300 万居民的大都市区。
伦敦位于泰晤士河畔，两千年来一直是主要定居点，其历史可追溯至罗马人建国，并将其命名为 Londinium。
页脚
亲自试一试 »
CSS Flexbox 布局
当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，使用 flexbox 可以确保元素的行为是可预测的。
在 CSS Flexbox 一章中了解更多关于flexbox的信息。
实例
Cities
伦敦
巴黎
东京
伦敦
伦敦是英格兰的首都。 它是英国人口最多的城市，拥有超过 1300 万居民的大都市区。
伦敦位于泰晤士河畔，两千年来一直是主要定居点，其历史可追溯至罗马人建国，并将其命名为 Londinium。
页脚
亲自试一试 »
CSS Grid 网格布局
CSS 网格布局模块提供了一个基于网格的布局系统，具有行和列，使得设计网页更容易，而不必使用浮动和定位。
在 CSS 网格视图 一章中了解更多关于CSS网格的信息。
❮ 上一节
下一节 ❯