如何操作 - 响应式 Zig Zag 布局

了解如何使用 CSS 创建响应式之字形（交替）布局。

如何创建之字形布局

步骤1）添加HTML：

示例

步骤2）添加CSS：

示例

* {
box-sizing: border-box;
}

.container {
padding: 64px;
}

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

/* 2/3 column */
.column-66 {
float: left;
width: 66.66666%;
padding: 20px;
}

/* 1/3 column */
.column-33 {
float: left;
width: 33.33333%;
padding: 20px;
}

/* Add responsiveness - make the columns appear on top of each other instead of next to each other on small screens */
@media screen and (max-width: 1000px) {
.column-66,
.column-33 {
width: 100%;
text-align: center;
}
}

亲自试一试 »

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

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