如何使用 CSS 分成两列？ 在许多网页设计中，要把页面的内容分成两列是非常普遍的，而 CSS 提供了一种简单且有效的方法来做到这一点。下面我们来看看如何使用 CSS 把网页内容分成两列。 首先，我们需要使用 HTML 创建一个包含所有内容的容器。为了方便起见，我们可以使用一个 div 标签，它允许我们创建一个块级元素，可以包含其他 HTML 标签。我们可以给这个容器一个类名，便于在 CSS 中引用。 如下所示：

<div class="column-container">
<p>这是第一栏内容</p>
<p>这是第二栏内容</p>
</div>

接下来，我们将使用 CSS 把容器分成两列。在 CSS 中，我们可以使用 float 属性来把元素从正常排布的位置移动到另一个位置。我们可以将第一列浮动到左边，第二列浮动到右边。如下所示：

.column-container {
width: 100%;
}
.column-container p {
padding: 10px;
margin: 0;
}
.column-container .left-column {
float: left;
width: 50%;
}
.column-container .right-column {
float: right;
width: 50%;
}

以上 CSS 代码中，我们使用了 width 属性来指定每列的宽度。由于分成两列，所以每列的宽度是容器的一半。接着，我们使用 float 属性把左列浮动到左边，把右列浮动到右边。两个列现在被“拆分”成两个不同的块，这就是两列布局的开始。 接下来，我们可以对容器和列添加样式，以更改背景颜色，字体样式和边框等等。由于我们已经在 HTML 中使用了类名，所以可以轻松地在 CSS 中引用它们。 做到这一步后，两列网页布局就已经完成了。如果我们想升级到三栏式布局，只需在容器内添加另一个 div，设置相应的样式即可。 总结 使用 CSS 分成两列非常简单，只需创建一个包含所有内容的容器，然后使用 float 属性将它们“拆分”成不同的块。之后，我们可以轻松地为它们添加样式。 希望以上简单的示例为你带来了一些启示。现在你已经掌握了如何使用 CSS 分成两列，您可以试试为您的网页创建创新性的布局。