歡迎來到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.rs2pl.com/rumen/r64312.shtml

久久天天躁狠狠躁夜夜躁2020