欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  内容区域
  
  内容区域一般有三种形式:
  
  1 列:一般用于移动端
  
  2 列:一般用于平板设备
  
  3 列:一般用于 PC 桌面设备
  
  我们将创建一个 3 列布局,在小的屏幕上将会变成 1 列布局(响应式):
  
  CSS3 实例
  
  /* 创建三个相等的列 */
  
  .column {
  
  float: left;
  
  width: 33.33%;
  
  }
  
  /* 列后清除浮动 */
  
  .row:after {
  
  content: "";
  
  display: table;
  
  clear: both;
  
  }
  
  /* 响应式布局 - 小于 600 px 时改为上下布局 */
  
  @media screen and (max-width: 600px) {
  
  .column {
  
  width: 100%;
  
  }
  
  }

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r64312.shtml