操作方法 - 三栏布局

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

第 1 栏

一些文字..

第2栏

一些文字..

第3栏

一些文字..

亲自试一试 »

如何创建三列布局

步骤1）添加HTML：

示例

步骤2）添加CSS：

在此示例中，我们将创建三个相等列：

示例

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

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

亲自试一试 »

在此示例中，我们将创建三个不等列：

示例

.column {
float: left;
}

.left, .right {
width: 25%;
}

.middle {
width: 50%;
}

亲自试一试 »

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

示例

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

亲自试一试 »

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

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