操作方法 - 两栏布局

了解如何使用 CSS 创建 2 列布局网格。

第 1 栏

一些文字..

第2栏

一些文字..

亲自试一试 »

如何创建两列布局

步骤1）添加HTML：

示例

步骤2）添加CSS：

在这个例子中，我们将创建两个相等列：

浮动示例

.column {
float: left;
width: 50%;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

亲自试一试 »

创建两列的现代方法是使用CSS 弹性盒。但是，Internet Explorer 10 及更早版本不支持它。

Flex 示例

.row {
display: flex;
}

.column {
flex: 50%;
}

亲自试一试 »

如果您想使用 float 或 flex 来创建两列布局，则由您决定。但是，如果您需要支持 IE10 及以下版本，则应使用 float。

提示：要了解有关灵活框布局模块的更多信息，阅读我们的 CSS Flexbox 章节。

在这个例子中，我们将创建两个不等列：

示例

.column {
float: left;
}

.left {
width: 25%;
}

.right {
width: 75%;
}

亲自试一试 »

在这个例子中，我们将创建一个响应式两列布局：

示例

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}

亲自试一试 »

提示：去我们的CSS 网站布局了解有关网站布局的更多信息的教程。

提示：去我们的CSS 响应式网页设计了解有关响应式网页设计和网格的更多信息的教程。