如何创建:三列布局
学习如何使用 CSS 创建三列布局网格。
如何创建三列布局
第一步 - 添加 HTML:
<div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>
第二步 - 添加 CSS:
在此例中,我们将创建三个等宽的列:
实例
.column { float: left; width: 33.33%; } /* 清除列后浮动 */ .row:after { content: ""; display: table; clear: both; }
在此例中,我们将创建三个不等宽的列:
实例
.column { float: left; } .left, .right { width: 25%; } .middle { width: 50%; }
在此例中,我们将创建一个响应式三列布局:
实例
/* 响应式布局 - 当屏幕宽度小于 600px 时,使三列堆叠,而不是并排*/ @media screen and (max-width: 600px) { .column { width: 100%; } }
相关页面
教程:CSS 网站布局
教程:CSS 响应式网页设计