如何创建 - 响应式锯齿形布局
了解如何使用 CSS 创建响应式 zig zag（交替）布局。
如何创建之字形布局
步骤 1) 添加 HTML:
实例
<div class="container">
<div class="row">
<div
class="column-66">
...
</div>
<div class="column-33">
...
</div>
</div>
</div>
<div
class="container">
<div class="row">
<div
class="column-33">
...
</div>
<div class="column-66">
...
</div>
</div>
</div>
步骤 2) 添加 CSS:
实例
* {
box-sizing: border-box;
}
.container {
padding: 64px;
}
/* 清除浮动 */
.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;
}
/* 添加响应式布局 - 使列在小屏幕上显示在彼此之上而不是彼此相邻 */
@media screen and (max-width: 1000px) {
.column-66,
.column-33 {
width: 100%;
text-align: center;
}
}
亲自试一试 »
提示:转到我们的 CSS 网站布局教程，了解有关网站布局的更多信息。
提示:转到我们的CSS 响应式网页设计教程，了解有关响应式网页设计和网格的更多信息。
