河南省温县国际英文域名注册/中文国内域名申请/企业域名服务器空间备案-企业域名

亲自试一试

提示：如需创建 2 列布局，请将宽度更改为 50％。如需创建 4 列布局，请使用 25％。

提示：您是否想知道 @media 规则如何工作？请在我们的 CSS 媒体查询 这一章中学习更多相关知识。

提示：创建列布局的一种更现代的方法是使用 CSS Flexbox。但是，Internet Explorer 10 和更早版本不支持它。如果需要 IE6-10 支持，请使用浮动（如上所示）。

如需了解有关 Flexible Box 布局模块的更多信息，请阅读我们的 CSS Flexbox 教程。

不相等的栏

主要内容（main content）是您网站上最大、最重要的部分。

列宽不相等的情况很常见，因为大部分空间都为主内容保留。附属内容（如果有）通常用作替代导航或指定与主要内容有关的信息。您可以随意更改宽度，只要记住它的总和应为 100％：

实例

.column {
  float: left;}/* 左和右列 */.column.side {
  width: 25%;}/* Middle column */.column.middle {
  width: 50%;}/* 响应式布局 - 使三列堆叠，而不是并排 */@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }}

结果：

亲自试一试

页脚

页脚位于页面底部。它通常包含诸如版权和联系方式之类的信息：

实例

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;}

结果：

亲自试一试

响应式网站布局

通过使用上面的这些 CSS 代码，我们创建了一个自适应的网站布局，会根据屏幕宽度切换两列与全宽