如何使用浮动和列通过CSS布局内容
作为 Write for DOnations 计划的一部分，作者选择了 Diversity in Tech Fund 来接受捐赠。
介绍
有很多方法可以在 Web 上使用布局。 现代方法倾向于依赖 CSS Grid 和 Flexbox 属性来创建许多 Web 布局。 然而，在 Grid 和 Flexbox 出现之前，Web 开发人员严重依赖 float 和 columns 属性。 float 属性用于允许内联元素环绕浮动元素，column 设置用于在列中排列文本的参数。 因为这些属性还具有 Grid 和 Flexbox 都无法复制的属性，所以学习这种布局方法可以为设计人员的技能集增加选项和灵活性。
在本教程中，您将使用 float 和 columns 属性来创建各种布局样式和效果。 您将使用 float 属性来浮动拉引号和图像，并使内容环绕这些元素。 然后，您将使用 columns 属性来调整垂直长的内容以跨水平轴传播。 此外，在您应用各种样式时，还将介绍响应式网页设计的概念和方法。
先决条件
- 了解 CSS 的级联和特异性特性，您可以通过阅读 How To Apply CSS Styles to HTML with Cascade and Specificity 获得。
- 类型选择器、组合选择器和选择器组的知识，您可以在 如何选择 HTML 元素以使用 CSS 设置样式 中找到这些知识。
- 对使用 CSS 布局文本的理解，您可以在 如何使用 CSS 布局文本教程 中找到。
- 在您的本地计算机上保存为
index.html的空 HTML 文件，您可以从您选择的文本编辑器和 Web 浏览器访问该文件。 要开始使用，请查看我们的 如何设置您的 HTML 项目 教程，并按照 如何使用和理解 HTML 元素 获取有关如何在浏览器中查看 HTML 的说明。 如果您是 HTML 新手，请尝试整个 如何使用 HTML 构建网站系列。
设置初始 HTML 和 CSS
在本节中，您将设置将在整个教程中使用的基本 HTML 和 CSS。 您将使用来自 Cupcake Ipsum 的演示文本内容和来自 Google Fonts 的 字体 Comfortaa。
首先，在文本编辑器中打开 index.html 文件。 然后，将以下 HTML 添加到文件中：
索引.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cupcake Layouts</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
</body>
</html>
在 <head> 元素中定义了很多页面设置。 第一个 <meta> 元素定义用于文本的字符集。 这样，大多数特殊字符（例如重音符号）将在没有特殊 HTML 代码的情况下呈现。 第二个 <meta> 元素告诉浏览器（尤其是移动浏览器）将设备的宽度视为内容的宽度； 否则浏览器将模拟 960 像素的桌面宽度。 <title> 元素为浏览器提供页面的标题。 <link> 元素以页面样式加载：前两个以来自 Google Fonts 的字体 Comfortaa 加载，最后一个加载您将为本教程编写的样式。
接下来，页面将需要设置样式的内容。 您将使用 Cupcake Ipsum 中的示例内容作为填充副本来处理样式。 在整个教程中，将突出显示新代码。
在文本编辑器中返回 index.html 并添加以下代码块中突出显示的 HTML：
索引.html
<!doctype html>
<html>
<head>
...
</head>
<body>
<article>
<h1>Carrot Cake Pie Toffee Cheesecake</h1>
<p>Gummi bears powder tootsie roll biscuit. Icing jelly-o tootsie roll powder pie dessert biscuit tiramisu. Jelly beans pudding lemon drops sesame snaps jujubes sesame snaps gummi bears tiramisu. Apple pie danish soufflé soufflé cupcake cookie donut. Cookie gummies powder dragée powder chocolate bar muffin jelly marshmallow. Cheesecake dessert chocolate bar chocolate cake gingerbread chocolate bar gingerbread wafer brownie. Bear claw cake sugar plum muffin candy canes tart cheesecake croissant candy canes. Gummi bears carrot cake sweet chocolate. Carrot cake cake sweet bear claw. Gummi bears chocolate pie croissant chocolate cake bear claw dragée.</p>
<p>Tootsie roll cotton candy cake tiramisu pastry. Croissant oat cake ice cream dragée sweet roll soufflé marshmallow powder marzipan. Lemon drops cake bear claw cake sweet lollipop. Lollipop toffee liquorice apple pie gingerbread pastry tiramisu.</p>
<h2>Jelly Beans Wafer Apple Pie Icing</h2>
<p>Jelly cotton candy cake pastry carrot cake. Topping icing danish. Lollipop sesame snaps muffin bonbon icing. Lollipop chocolate bar jelly-o sweet roll. Topping bear claw sweet. Apple pie bonbon sweet lemon drops caramels topping pastry. Biscuit jelly tootsie roll cookie tiramisu cotton candy. Icing chocolate cake liquorice ice cream sesame snaps cupcake chocolate bar pudding gingerbread. Donut toffee ice cream chocolate biscuit.</p>
<p>Carrot cake pie halvah toffee cheesecake chocolate cake gingerbread liquorice. Marshmallow danish candy fruitcake chocolate dessert. Bear claw chocolate bar sugar plum pudding cake cheesecake sweet. Marzipan lemon drops croissant gummies. Dessert carrot cake carrot cake cookie candy canes toffee. Biscuit bear claw candy canes muffin. Lollipop gummies tart danish tart sugar plum biscuit. Lemon drops muffin sugar plum sweet. Cotton candy pastry topping caramels gummies carrot cake marzipan tiramisu sesame snaps.</p>
<p>Ice cream donut cookie. Donut icing cookie sweet roll topping cookie. Jelly beans marzipan jujubes jelly beans ice cream marzipan apple pie cake. Sweet croissant sweet roll carrot cake oat cake tiramisu ice cream wafer wafer. Candy canes jelly beans toffee danish. Liquorice donut macaroon caramels. Donut pie cupcake gummies. Icing jujubes pudding apple pie pastry muffin sweet roll ice cream chocolate bar. Liquorice icing sugar plum marshmallow icing.</p>
<h2>Jelly Sugar Plum Chocolate Danish</h2>
<p>Topping marzipan sesame snaps soufflé chupa chups cookie wafer cupcake. Jelly beans lollipop jelly beans. Chocolate cake lemon drops chupa chups candy icing tootsie roll danish liquorice. Gummies danish dragée apple pie jelly pie topping icing tootsie roll. </p>
<p>Apple pie bear claw muffin tiramisu gummi bears cake muffin. Candy canes oat cake croissant cake liquorice topping halvah dessert cheesecake. Candy fruitcake muffin. Cookie oat cake gummies brownie dessert candy canes icing. Soufflé chocolate cake pastry toffee cheesecake macaroon liquorice gummi bears. Halvah tiramisu jujubes. Bear claw candy danish. Macaroon chocolate wafer soufflé biscuit. Bear claw biscuit sesame snaps biscuit liquorice sweet roll lollipop. Marshmallow bear claw dragée icing liquorice candy donut chupa chups. Halvah dessert bonbon cupcake cupcake sugar plum cotton candy toffee muffin. Bonbon gummi bears jujubes chupa chups oat cake candy canes.</p>
<p>Gummies bonbon marzipan icing pudding. Jujubes croissant carrot cake. Pastry halvah pudding toffee. Lemon drops gingerbread chocolate apple pie jelly cheesecake.</p>
<p>Fruitcake dessert chocolate cupcake carrot cake dessert candy canes chocolate soufflé. Cookie cupcake marzipan sesame snaps biscuit tart pie jelly-o. Halvah tiramisu gummies biscuit powder donut. Chocolate cake bear claw macaroon.</p>
<h2>Gingerbread Macaroon Fruitcake</h2>
<p>Jelly chocolate gummies cupcake liquorice chocolate. Sugar plum donut tiramisu muffin chupa chups. Cake caramels fruitcake jelly beans pudding I love pie lollipop jelly beans. Gummi bears cheesecake dragée I love fruitcake sesame snaps I love. Apple pie muffin donut. Fruitcake donut chocolate bar cotton candy topping candy macaroon I love. Fruitcake sesame snaps jelly-o. Tart wafer sugar plum I love apple pie biscuit. Pastry sesame snaps tart. Apple pie gingerbread chocolate candy canes.</p>
<p>I love cake sweet roll toffee lemon drops bonbon sweet. Oat cake lemon drops candy canes topping macaroon.</p>
<p>Sweet cotton candy danish. Lollipop bear claw pudding carrot cake. Gummi bears candy canes chocolate cake chupa chups. Sugar plum jelly cake cookie cheesecake croissant muffin carrot cake. Pudding I love liquorice jelly-o caramels I love sweet roll bonbon oat cake. Caramels gummi bears gingerbread.</p>
</article>
<body>
</html>
将这些添加保存到您的 index.html 文件中，然后在您的网络浏览器中打开它。 内容将使用浏览器默认样式，如下图所示：
在与 index.html 相同的文件夹中创建一个名为 styles.css 的文件，然后在文本编辑器中打开它。 该文件将包含整个教程中使用的所有样式。 第一组样式将应用您稍后将建立的一般美学。 将以下代码块中的 CSS 应用到您的 styles.css 文件：
样式.css
body {
font: 100%/1.5 Comfortaa, sans-serif;
color: hsl(300, 100%, 10%);
background-color: hsl(300, 100%, 98%);
}
article {
width: 90%;
max-width: 75ch;
margin: 2rem auto;
}
h1 {
font-size: 1.75rem;
color: hsl(204, 100%, 29%);
margin: 1em 0 0.5em;
}
h2 {
font-size: 1.5rem;
color: hsl(204, 100%, 29%);
margin: 1em 0 0.5em;
}
这些样式添加了一组最小样式，使用 body 选择器上的简写 font 属性来设置新的默认字体系列和文本行之间的行高。 设置为 article 选择器的样式使容器的宽度略小于全屏宽度，但通过将 margin 属性设置为 auto 来保持内容居中左值和右值。 article 的最大值也为 75ch，这意味着它的宽度仅为设置的 font-size 值的 75 个零字符。 最后，h1 和 h2 选择器为每个选择器设置了一个新的 font-size、color 和 margin。
将更改保存到 styles.css，然后在 Web 浏览器中刷新 index.html。 下图显示了这些新的基本样式在浏览器中的显示方式：
在本节中，您设置了开始添加 float 和 columns 内容所需的基本 HTML 和 CSS。 在下一节中，您将创建一个浮动的块引用，允许内容环绕它。 您还将创建一条水平规则线，阻止内容环绕浮动元素。
浮动内容
接下来，您将添加一个 <blockquote> 元素并应用一个 float 属性以使内容环绕浮动内容。
要创建报价内容，请在文本编辑器中打开 index.html。 在第一个 <p> 内容块之后，添加一个 <blockquote> 开始和结束标记。 在 <blockquote> 标签内，添加一个新的 <p> 内容块，其中包含来自 Cupcake Ipsum 的几句话。 在下一个 <p> 内容块之后，但在 <h2> 标题之前，使用自闭合 <hr /> 元素添加水平线。 以下代码块中突出显示的 HTML 指示要添加到文件的位置和内容：
索引.html
<!doctype html>
<html>
...
<body>
<article>
<h1>Carrot Cake Pie Toffee Cheesecake</h1>
<p>Gummi bears powder tootsie roll biscuit. Icing jelly-o tootsie roll powder pie dessert biscuit tiramisu. Jelly beans pudding lemon drops sesame snaps jujubes sesame snaps gummi bears tiramisu. Apple pie danish soufflé soufflé cupcake cookie donut. Cookie gummies powder dragée powder chocolate bar muffin jelly marshmallow. Cheesecake dessert chocolate bar chocolate cake gingerbread chocolate bar gingerbread wafer brownie. Bear claw cake sugar plum muffin candy canes tart cheesecake croissant candy canes. Gummi bears carrot cake sweet chocolate. Carrot cake cake sweet bear claw. Gummi bears chocolate pie croissant chocolate cake bear claw dragée.</p>
<blockquote>
<p>Apple pie danish soufflé soufflé cupcake cookie donut. Cookie gummies powder dragée powder chocolate bar muffin jelly marshmallow.</p>
</blockquote>
<p>Tootsie roll cotton candy cake tiramisu pastry. Croissant oat cake ice cream dragée sweet roll soufflé marshmallow powder marzipan. Lemon drops cake bear claw cake sweet lollipop. Lollipop toffee liquorice apple pie gingerbread pastry tiramisu.</p>
<hr />
<h2>Jelly Beans Wafer Apple Pie Icing</h2>
...
</article>
</body>
</html>
将这些更改保存到您的 index.html 文件中，然后返回 Web 浏览器并刷新页面。 引用将从您编写的初始 CSS 集继承一些样式，但仍应用一些浏览器默认样式。 下图显示了引号和水平线在浏览器中的显示方式：
要开始为引用内容添加样式，请在文本编辑器中打开 styles.css。 首先创建一个 blockquote 元素选择器，然后添加一个 1rem 的 padding，一个 background-color 属性用 hsl(204, 100%, 15%) 设置为深紫色，最后将 color 属性设置为使用 hsl(24, 100%, 85%) 的浅黄色。 接下来，添加一个 blockquote p 组合选择器，将内容的 font-size 增加到 1.25rem 并通过添加一个值为 margin 的属性来移除默认间距0。 以下代码块中突出显示的 CSS 显示了如何在文本编辑器中对其进行格式化：
样式.css
...
h2 {
font-size: 1.5rem;
color: hsl(204, 100%, 29%);
margin: 1em 0 0.5em;
}
blockquote {
padding: 1rem;
background-color: hsl(204, 100%, 15%);
color: hsl(24, 100%, 85%);
}
blockquote p {
font-size: 1.25rem;
margin: 0;
}
将更改保存到 styles.css，然后在 Web 浏览器中重新加载 index.html。 块引用样式现在将具有较大的文本，具有较深的背景和浅黄色文本，如下图所示：
接下来，将 float 属性应用于 blockquote。 float 属性有三个值选项：left、right 和 none。 这意味着浮动内容要么位于包装内容的左侧，要么位于右侧。 如果内容已经浮动，您可以使用 none 来移除浮动功能。 对于块引用，您将其设置为向左浮动，因此它下面的段落向右换行。
在文本编辑器中返回 styles.css。 在 blockquote 元素选择器中，添加值设置为 left 的 float 属性，如以下代码块中突出显示的那样：
样式.css
...
blockquote {
padding: 1rem;
background-color: hsl(204, 100%, 15%);
color: hsl(24, 100%, 85%);
float: left;
}
...
此时块引用是浮动的，但它不会导致任何内容换行，因为浮动是如何处理内部内容的一个方面。 浮动元素仍会扩展到内容的自然宽度。 这意味着，由于 blockquote 中的内容很长，它仍然会占用相同数量的空间，就好像它没有浮动一样。 要强制进行视觉更改，请将设置为 40% 值的 width 属性添加到 blockquote 选择器，如以下代码块中突出显示的那样：
样式.css
...
blockquote {
padding: 1rem;
background-color: hsl(204, 100%, 15%);
color: hsl(24, 100%, 85%);
float: left;
width: 40%;
}
...
将这些更改保存到 styles.css，然后在 Web 浏览器中刷新 index.html。 <blockquote> 元素的宽度现在被限制为父容器宽度的 40% o，这允许下面的段落向上拉并在右侧换行。 下图显示了它在浏览器中的显示方式：
需要对块引用进行的最后格式调整是元素周围的间距。
在文本编辑器中返回 styles.css。 然后转到 blockquote 元素选择器块并添加一个值为 0 1rem 1rem 0 的 margin 属性。 以下代码块中突出显示的 CSS 行显示了它的格式：
样式.css
...
blockquote {
padding: 1rem;
background-color: hsl(204, 100%, 15%);
color: hsl(24, 100%, 85%);
float: left;
width: 40%;
margin: 0 1rem 1rem 0;
}
...
此 margin 值会将右侧和底部 margin 值设置为 1rem 并将顶部和左侧值设置为 0，从而沿两侧提供空间文本环绕引号的位置。
将更改保存到 styles.css，然后在 Web 浏览器中返回 index.html 并刷新。 下图显示了它在浏览器中的显示方式：
就像现在一样，浮动拉引号足够大，以至于下一节的标题也会换行。 这其中 clear 属性有助于防止这种情况。 clear 属性与 float 类似，具有三个属性值来抵消 float 属性并阻止内容换行。 clear 的值为 left、right，以及两者与 both 的组合。 放置此属性的元素将从该点向前停止环绕。
要使用 clear 属性，请在文本编辑器中打开 styles.css。 您将使用 <hr /> 元素来应用 clear 属性，因此首先创建一个 hr 元素选择器。 然后，要添加美学风格，添加值为 0.125 rem solid hsl(300, 50%, 90%) 的 border 属性以创建粗边框。 接下来，添加一个 margin 属性设置为 3rem 0，以便在边框上方和下方有额外的空间。 最后，添加 clear 属性并使用 both 值来阻止内容环绕引用元素。 以下代码块中突出显示的 CSS 显示了如何格式化这些样式：
样式.css
...
blockquote p {
font-size: 1.25rem;
margin: 0;
}
hr {
border: 0.125rem solid hsl(300, 50%, 90%);
margin: 3rem 0;
clear: both;
}
将更改保存到 styles.css 并返回浏览器并刷新 index.html。 如下图所示，<hr> 元素不再环绕在引号的右侧。 相反，规则线在下方，扩展了内容的整个宽度。 但是，引号和 <hr> 之间的距离使用浮点数上的 margin 而不是 <hr> 元素的较大 margin 值：
在本节中，您将浮点数应用于 <blockquote>，这导致其他元素环绕它。 您还添加了 margin 以在引号周围留出空白，使包装内容更加清晰。 在下一节中，您将使用媒体查询在屏幕尺寸达到一定宽度时浮动图像。
给定屏幕宽度的浮动图像
有效的响应式网页设计有三个要求：灵活的宽度、可调整大小的图像和媒体查询。 在此步骤中，您将使用所有这三种方法使图像在特定屏幕宽度处向右浮动，然后在更大的屏幕尺寸下将图像拉入右侧边距。
首先，将图像加载到页面上。 在文本编辑器中打开 index.html，然后在 <h2>Jelly Beans Wafer Apple Pie Icing</h2> 之后的前两段之间添加一个 <img /> 元素。 与上一节中的 <hr /> 元素一样，<img /> 是一个自闭合元素； 但是，<img /> 需要一个 src 属性来指示将放置在页面上的图像文件所在的位置。 以下代码块中突出显示的 HTML 显示了如何在代码中设置 <img />：
索引.html
<!doctype html>
<html>
...
<body>
<article>
...
<hr />
<h2>Jelly Beans Wafer Apple Pie Icing</h2>
<p>Jelly cotton candy cake pastry carrot cake. Topping icing danish. Lollipop sesame snaps muffin bonbon icing. Lollipop chocolate bar jelly-o sweet roll. Topping bear claw sweet. Apple pie bonbon sweet lemon drops caramels topping pastry. Biscuit jelly tootsie roll cookie tiramisu cotton candy. Icing chocolate cake liquorice ice cream sesame snaps cupcake chocolate bar pudding gingerbread. Donut toffee ice cream chocolate biscuit.</p>
<img src="https://source.unsplash.com/-hM0-PSO3FY/450x300" alt="Icing lemon drops danish tiramisu soufflé" />
<p>Carrot cake pie halvah toffee cheesecake chocolate cake gingerbread liquorice. Marshmallow danish candy fruitcake chocolate dessert. Bear claw chocolate bar sugar plum pudding cake cheesecake sweet. Marzipan lemon drops croissant gummies. Dessert carrot cake carrot cake cookie candy canes toffee. Biscuit bear claw candy canes muffin. Lollipop gummies tart danish tart sugar plum biscuit. Lemon drops muffin sugar plum sweet. Cotton candy pastry topping caramels gummies carrot cake marzipan tiramisu sesame snaps.</p>
...
</article>
</body>
</html>
对于您的图像，您使用 Unsplash 图像服务中的图片来提供 src 值。 <img /> 元素还需要有一个 alt 属性来提供描述文本。 此描述文本可以以多种方式使用，但最重要的是为屏幕阅读器用户提供上下文信息。
将您的更改保存到 index.html 并在浏览器中刷新页面。 您现在将在两个段落之间的页面上加载图像，如下图所示：
默认情况下，网页上的图像以其给定的像素大小显示。 对于之前添加到 HTML 的图像，它的大小为 450 像素宽和 300 像素高。 当加载到屏幕尺寸小于 450 像素宽的手机上时，图像会离开屏幕并导致水平滚动条。 要将图像设置为调整大小以适应包含的空间，您可以在 img 上使用 width: 100%。 然而，这种方法允许图像变得大于其实际大小，随着图像的增长而扭曲图像，称为 像素化 。 相反，最好使用 max-width: 100%，它允许图像缩小到更严格的空间，但不会超过其实际大小。
要创建这些调整大小的图像，请在文本编辑器中返回 styles.css。 在文档顶部的 body 元素选择器之后，添加一个 img 元素选择器。 在选择器块内添加值为 100% 的 max-width 属性。 以下代码块中突出显示的 CSS 演示了如何设置 img 选择器：
样式.css
body {
font: 100%/1.5 Comfortaa, sans-serif;
color: hsl(300, 100%, 10%);
background-color: hsl(300, 100%, 98%);
}
img {
max-width: 100%;
}
article {
width: 90%;
max-width: 75ch;
margin: 2rem auto;
}
...
将这些更改保存到 styles.css 并在 Web 浏览器中刷新 index.html。 使用浏览器窗口并将宽度减小到更接近手机大小。 一旦窗口宽度变得小于图像的宽度，图像就会缩小。 下图显示了它在浏览器中窄宽度窗口的外观：
现在您有了响应式缩放图像，接下来您将在有足够空间时将图像向右浮动。 在特定窗口或屏幕宽度上更改样式是通过称为 媒体查询 的特殊规则条件完成的。 媒体查询是通过使用 @media 规则后跟媒体条件来定义的，在其中应用它包含的样式。 在这种情况下，您希望窗口大小至少为 640 像素。 由于最终用户可以影响像素的含义，因此将 640 除以 16 得到 rem 单位值 40。 定义查询后，它将拥有自己的一组花括号，其中包含需要在指定屏幕宽度处更改的选择器。
在文本编辑器中打开 styles.css 文件。 然后创建一个媒体查询集为 40rem 的 min-width。 在查询块中，添加一个 img 元素选择器，并将 float 属性设置为 right。 所以图像在这个视图中不会占用太多空间，将max-width的值设置为50%。 最后，使用 margin 属性在图像的左侧和底部位置添加边距。 以下代码块中突出显示的 CSS 演示了如何添加媒体查询和相关样式：
样式.css
...
blockquote p {
font-size: 1.25rem;
margin: 0;
}
@media (min-width: 40rem) {
img {
float: right;
max-width: 50%;
margin: 0 0 1rem 1rem;
}
}
...
将更改保存到 styles.css，然后返回浏览器并刷新页面。 确保将浏览器从小屏幕尺寸调整为更常见的桌面浏览器窗口尺寸。 图像现在将向右浮动，文本内容向左环绕，如下图所示：
文本现在定义了布局，并在较大的桌面屏幕尺寸上在左右两侧留出大量额外空间。 在这种情况下，将图像拉入额外的空间在美学和功能上都有帮助。 这可以通过浮动元素上的负边距值来完成。
要创建此效果，请在文本编辑器中打开 styles.css，然后为 80rem 的 min-width 添加另一个媒体查询，相当于 1280 像素。 在查询块中，添加一个 img 元素选择器并将 max-width 属性返回为 100% 的值。 然后添加一个 margin 属性，顶部和底部位置设置为 1rem，左侧位置设置为 2rem。 将正确的位置设置为 -40%。 此值会将图像拉入内容右侧的空白区域，距离父元素的宽度为 40% o，而不是 img 宽度。 以下代码块中突出显示的 CSS 演示了如何设置它：
样式.css
...
@media (min-width: 40rem) {
img {
float: right;
max-width: 50%;
margin: 0 0 1rem 1rem;
}
}
@media (min-width: 80rem) {
img {
max-width: 100%;
margin: 1rem -40% 1rem 2rem;
}
}
...
将这些更改保存到 styles.css，然后在浏览器中刷新 index.html。 您可能需要扩大窗口的宽度，但一旦达到大约 1280 像素的宽度，图像将向右拉，内容将继续在左侧环绕。 下图显示了它在浏览器中的显示方式：
在本节中，您使用了媒体查询、百分比宽度和负边距值来浮动图像并将其拉入布局的空白区域。 在下一节中，您将开始使用 columns 属性在给定的媒体查询屏幕宽度下将某些内容从单列更改为两列。
栏目内容
在处理文本内容时，有时调整布局以使内容并排，甚至从一列换到下一列会很有帮助。 使用 CSS 创建列的方法有很多种，但只有 columns 属性会在不同列之间划分一个元素的内容。 在本节中，您将使用 columns 属性为要换行的内容创建两列布局。 然后，您将使用额外的 columns 属性在列之间创建分界线，并告诉元素如何与列交互以强制分列。
首先，打开 index.html 并将 <h2>Jelly Sugar Plum Chocolate Danish</h2> 之后的两个段落包装在具有 column 类属性的 <div> 元素中。 以下代码块中突出显示的 HTML 显示了它在您的文件中的外观：
索引.html
<!doctype html>
<html>
...
<body>
<article>
...
<h2>Jelly Sugar Plum Chocolate Danish</h2>
<div class="column">
<p>Topping marzipan sesame snaps soufflé chupa chups cookie wafer cupcake. Jelly beans lollipop jelly beans. Chocolate cake lemon drops chupa chups candy icing tootsie roll danish liquorice. Gummies danish dragée apple pie jelly pie topping icing tootsie roll. </p>
<p>Apple pie bear claw muffin tiramisu gummi bears cake muffin. Candy canes oat cake croissant cake liquorice topping halvah dessert cheesecake. Candy fruitcake muffin. Cookie oat cake gummies brownie dessert candy canes icing. Soufflé chocolate cake pastry toffee cheesecake macaroon liquorice gummi bears. Halvah tiramisu jujubes. Bear claw candy danish. Macaroon chocolate wafer soufflé biscuit. Bear claw biscuit sesame snaps biscuit liquorice sweet roll lollipop. Marshmallow bear claw dragée icing liquorice candy donut chupa chups. Halvah dessert bonbon cupcake cupcake sugar plum cotton candy toffee muffin. Bonbon gummi bears jujubes chupa chups oat cake candy canes.</p>
<p>Gummies bonbon marzipan icing pudding. Jujubes croissant carrot cake. Pastry halvah pudding toffee. Lemon drops gingerbread chocolate apple pie jelly cheesecake.</p>
<p>Fruitcake dessert chocolate cupcake carrot cake dessert candy canes chocolate soufflé. Cookie cupcake marzipan sesame snaps biscuit tart pie jelly-o. Halvah tiramisu gummies biscuit powder donut. Chocolate cake bear claw macaroon.</p>
</div>
<h2>Gingerbread Macaroon Fruitcake</h2>
...
</article>
</body>
</html>
将更改保存到 index.html，然后在文本编辑器中返回到 styles.css。 当内容宽度较窄时，它太小而无法分列。 相反，在 min-width: 40rem 媒体查询中添加一个 .column 类选择器。 然后给 .column 选择器一个 columns 属性，其值为 2，如以下代码块中突出显示的那样：
样式.css
...
@media (min-width: 40rem) {
img {
float: right;
max-width: 50%;
margin: 0 0 1rem 1rem;
}
.column {
columns: 2;
}
}
@media (min-width: 80rem) {
...
}
保存对 styles.css 的更改，然后在 Web 浏览器中刷新 index.html。 这两个段落的内容将被分成两列，第一列底部的第二句话的第一行包裹到第二列中，如下图所示：
有一些 columns 属性。 columns 属性本身是 column-count 和 column-width 的简写组合。 如果您需要定义列的指定宽度，重要的是要知道列的大小始终相等。 还有两个伴随属性有助于列的视觉呈现。 第一个是 column-gap，它允许指定每列之间的间距。 第二个属性称为 column-rule，其功能类似于 border，但仅在列之间绘制一条垂直线。
要添加自定义间隙和规则，请在文本编辑器中打开 styles.css。 在 .columns 选择器块中，添加值为 2rem 的 column-gap 属性。 接下来，添加值为 2px solid hsl(300, 50%, 90%) 的 column-rule 属性，这将使用与之前的 <hr /> 元素相同的颜色在列之间创建一条垂直规则线。 以下代码块中突出显示的 HTML 显示了它在您的文件中的外观：
样式.css
...
@media (min-width: 40rem) {
img {
float: right;
max-width: 50%;
margin: 0 0 1rem 1rem;
}
.column {
columns: 2;
column-gap: 2rem;
column-rule: 2px solid hsl(300, 50%, 90%);
}
}
@media (min-width: 80rem) {
...
}
保存对 styles.css 的更改并在 Web 浏览器中刷新 index.html。 列之间的空间增加了，间隙中间现在是一条实心垂直规则线，如下图所示：
最后，可以将属性应用于列内的元素以影响它们与布局的交互方式。 第一列中的段落比第二列中的文本有更多的空间。 这是因为列如何与 margin 属性以及 <p> 元素上的默认 margin 值交互。 :first-child 伪类可用于更改列内第一个 <p> 元素的 margin-top。 接下来，有一些属性可以控制列元素如何与列流交互：break-inside、break-after 和 break-before。 您将使用值为 avoid 的 break-inside 属性，它告诉浏览器防止拆分 <p> 元素的内容。
返回文本编辑器中的 styles.css 以开始将这些新样式应用于列内容。 在媒体查询中，添加一个由 .column p:first-child 组成的组合选择器，以将样式范围限定为 <div class="columns"> 元素内的第一个 <p> 元素。 然后将 margin-top 属性设置为 0 的值。 创建一个新的 .column p 组合选择器，以将这些样式应用于 <div class="columns"> 元素内的所有 <p> 元素。 最后，添加值为 avoid 的 break-inside 属性，以防止列拆分内容。 以下代码块中突出显示的 CSS 演示了如何设置它：
样式.css
...
@media (min-width: 40rem) {
...
.column {
columns: 2;
column-gap: 2rem;
column-rule: 2px solid hsl(300, 50%, 90%);
}
.column p:first-child {
margin-top: 0;
}
.column p {
break-inside: avoid;
}
}
...
注意： 在使用 break-inside、break-after 和 break-before 属性时需要注意一些事项。 虽然浏览器对这些属性有很好的支持，但 avoid 值得到了最好的支持，而其他值的支持则参差不齐。 此外，支持 avoid 值的浏览器将解释何时以不同方式分隔列，从而导致浏览器之间的布局不同。 当浏览器之间需要视觉奇偶性时，使用该属性时要小心。
保存对 styles.css 的更改并在 Web 浏览器中刷新页面。 第二段现在已完全进入第一列。 这可能会使第一列大于第二列，但垂直规则可以适应变化。 第一段现在也与第二列在顶部对齐。 下图显示了它在大多数浏览器中的外观：
在本节中，您使用 columns 属性创建了两列流动内容。 您使用 column-gap 属性提供更多空间，并使用 column-rule 在列之间创建分界线。 最后，您使用 break-inside 属性来强制元素如何与列流交互。 在最后一节中，您将 columns 属性应用于有序列表，并使用媒体查询调整其表示。
列列表
在最后一部分中，您将应用在列、媒体查询和负边距值方面学到的知识来设置有序列表的样式。 columns 属性的优点之一是通过将长列表分成两列或三列来使它们的高度更短。
首先，您需要在 HTML 中添加一个有序列表。 在文本编辑器中打开 index.html 并在文件最后一段之前的以下代码块中添加突出显示的 HTML：
索引.html
<!doctype html>
<html>
...
<body>
<article>
...
<h2>Gingerbread Macaroon Fruitcake</h2>
<p>Jelly chocolate gummies cupcake liquorice chocolate. Sugar plum donut tiramisu muffin chupa chups. Cake caramels fruitcake jelly beans pudding I love pie lollipop jelly beans. Gummi bears cheesecake dragée I love fruitcake sesame snaps I love. Apple pie muffin donut. Fruitcake donut chocolate bar cotton candy topping candy macaroon I love. Fruitcake sesame snaps jelly-o. Tart wafer sugar plum I love apple pie biscuit. Pastry sesame snaps tart. Apple pie gingerbread chocolate candy canes.</p>
<p>I love cake sweet roll toffee lemon drops bonbon sweet. Oat cake lemon drops candy canes topping macaroon.</p>
<ol class="column-list">
<li>Cookie I love gingerbread topping</li>
<li>Carrot cake toffee I love croissant pudding</li>
<li>Sesame snaps pastry jelly-o</li>
<li>Fruitcake pastry dessert</li>
<li>Lollipop gingerbread I love caramels</li>
<li>Toffee</li>
<li>Croissant pudding I love muffin</li>
<li>Dessert jelly beans</li>
<li>jelly beans</li>
<li>Liquorice</li>
<li>I love cotton candy</li>
<li>Apple pie</li>
<li>Lemon raspberry cheesecake</li>
<li>muffin donut</li>
</ol>
<p>Sweet cotton candy danish. Lollipop bear claw pudding carrot cake. Gummi bears candy canes chocolate cake chupa chups. Sugar plum jelly cake cookie cheesecake croissant muffin carrot cake. Pudding I love liquorice jelly-o caramels I love sweet roll bonbon oat cake. Caramels gummi bears gingerbread.</p>
...
</article>
</body>
</html>
将您的更改保存到 index.html 并在 Web 浏览器中重新加载页面。 如下图所示，有序列表在单个内容列中编号为 1-14：
接下来，在文本编辑器中打开 styles.css，在第一个媒体查询之前创建一个 ol 元素选择器。 然后，您将添加样式以帮助列表在视觉上突出 padding、background-color，最后是 border。 以下代码块中突出显示的 CSS 演示了如何设置它以及用于属性的值：
样式.css
...
blockquote p {
font-size: 1.25rem;
margin: 0;
}
ol {
padding: 2rem;
background-color: hsl(300, 60%, 95%);
border: 0.25rem solid hsl(300, 50%, 90%);
}
@media (min-width: 40rem) {
...
}
...
保存对 styles.css 的更改，然后返回 Web 浏览器并刷新页面。 该列表将具有较暗的边框和背景颜色，如下图所示：
接下来，在文本编辑器中返回 styles.css 以添加列样式。 与上一节中的段落一样，这些列对于较大的屏幕尺寸最有效，并且在较小的屏幕上作为单列效果更好。 在 min-width: 40rem 媒体查询中添加一个 ol 元素选择器。 在选择器块中添加一个值为 2 的 columns 属性。 然后，因为有序列表的数字在容器之外，列之间需要额外的空间。 为了容纳这个额外的内容，添加一个 column-gap 属性设置为 3rem。 最后，在较大的屏幕尺寸下，在元素之间提供更多的垂直空间会很有帮助。 添加一个 margin 属性，顶部和底部位置设置为 2rem，左右设置为 0。 以下代码块中突出显示的 CSS 演示了如何设置它：
样式.css
...
ol {
padding: 2rem;
background-color: hsl(300, 60%, 95%);
border: 0.25rem solid hsl(300, 50%, 90%);
}
@media (min-width: 40rem) {
...
ol {
columns: 2;
column-gap: 3rem;
margin: 2rem 0;
}
}
...
将更改保存到 styles.css 并返回浏览器刷新 index.html。 确保您的浏览器窗口至少有 640 像素宽。 该列表现在分为两列长度相似，如下图所示：
接下来，有序列表中的项目可以在每个项目之间使用更多空间。 在文本编辑器中返回 styles.css。 在 (min-width: 40rem) 媒体查询中的 ol 选择器之后，添加一个 ol li 组合器选择器。 在选择器块中，将 margin-bottom 属性设置为 1em，将其设置为等于 li 元素的 font-size。 以下代码块中突出显示的 CSS 显示了在何处以及如何添加这些样式：
样式.css
...
@media (min-width: 40rem) {
...
ol {
columns: 2;
column-gap: 3rem;
margin: 2rem 0;
}
ol li {
margin-bottom: 1em;
}
}
...
将更改保存到 index.html 文件，然后返回 Web 浏览器并刷新页面。 现在每个列表项之间的间距要大得多，使读者更容易扫描列表。 下图显示了列表间距在浏览器中的外观：
最后，当有足够的屏幕空间时，返回文本编辑器中的 styles.css 以应用第三列。 首先在 (min-width: 80rem) 媒体查询中添加一个 ol 元素选择器，然后添加一个设置为 3 的 columns 属性。 由于您使用的是 min-width 查询，因此列之间的间隙将从先前的媒体查询继承，因此不需要重新定义。 但是，三列需要额外的空间，因此列不会太窄。 为了给列表额外的空间，添加一个 margin 属性，保持顶部和底部位置设置为 2rem，但将左右位置更改为负值 [ X190X]。 以下代码块中突出显示的 CSS 演示了如何设置它：
样式.css
...
@media (min-width: 40rem) {
...
}
...
@media (min-width: 80rem) {
img {
float: right;
width: 80%;
margin: 1rem -40% 1rem 2rem;
}
ol {
columns: 3;
margin: 2rem -5rem;
}
}
...
将更改保存到 styles.css，然后在 Web 浏览器中重新加载 index.html。 就像之前的浮动图像一样，这个负值会将列表的边拉到页面的额外边空间中。 这会产生视觉上的突出效果，从而引起对列表的关注。 下图显示了它在浏览器中的外观：
在最后一节中，您结合了从前几节中学到的所有内容。 您使用媒体查询、列和负边距来创建引人注目的有序列表样式，可用于帮助列表具有更有趣的呈现方式。
结论
使用 CSS 布局内容的方式有很多种，每个属性都有自己的特殊优势。 在本教程中，您使用了 float 属性来创建导致其他内容环绕它的元素。 您还使用 columns 属性来创建从一列流向下一列的内容。 此外，您还使用媒体查询和灵活的宽度将有效响应式设计的一些原则付诸实践。 当您在 Web 项目中处理布局解决方案时，了解完成任务的各种方法非常重要。 float 和 columns 属性都提供了一种方法来创建独特的东西并有助于提供良好的视觉设计。
如果您想阅读更多 CSS 教程，请尝试 如何使用 CSS 设置 HTML 样式系列 中的其他教程。
