23、CSS文本布局：列、区域与排除的应用

CSS文本布局：列、区域与排除的应用

1. CSS列布局

在网页浏览中，我们会发现HTML文档多呈矩形。以往创建多列设计需结合HTML、JavaScript和CSS，较为复杂。而CSS列布局功能为我们提供了简单的解决方案。

1.1 指定列数和列间距

我们可以创建一个普通文本块，然后通过CSS让浏览器将其显示为两列或更多列。例如，要将文本块显示为四列且列间距为20像素，可使用以下代码：

<style>
div {
  column-count: 4;
  column-gap: 20px;
}
</style>
<div>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci 
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate 
velit esse molestie consequat, vel illum dolore eu feugiat nulla 
facilisis at vero