如何 - 響應式鋸齒佈局
瞭解如何使用 CSS 建立響應式的鋸齒（交替）佈局。
如何建立鋸齒佈局
步驟 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-66 {
float: left;
width: 66.66666%;
padding: 20px;
}
/* 1/3 列 */
.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 響應式 Web 設計 教程瞭解更多關於響應式 Web 設計和網格的資訊。
