操作方法 - 四栏布局

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

第 1 栏

一些文字..

第2栏

一些文字..

第3栏

一些文字..

第 4 栏

一些文字..

亲自试一试 »

如何创建四列布局

步骤1）添加HTML：

示例

步骤2）添加CSS：

在此示例中，我们将创建四列布局：

示例

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

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

亲自试一试 »

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

示例

/* 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 响应式网页设计了解有关响应式网页设计和网格的更多信息的教程。