css写宽高比不变的盒子

最新推荐文章于 2024-07-29 18:03:30 发布

Saamao

最新推荐文章于 2024-07-29 18:03:30 发布

阅读量927

点赞数

分类专栏： css

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

 
  <head> 
 
 
  <meta 
  charset= 
  " 
  UTF-8 
  " 
  > 
 
 
  <meta 
  name= 
  " 
  viewport 
  " 
  content= 
  " 
  width=device-width, initial-scale=1.0 
  " 
  > 
 
 
  <meta 
  http-equiv= 
  " 
  X-UA-Compatible 
  " 
  content= 
  " 
  ie=edge 
  " 
  > 
 
 
  <title>Document 
  </title> 
 
 
    
  <style> 
 
 
  . 
  container 
  { 
 

   width 
  : 
  100 
  %; 
 

   height 
  : 
  100 
  %; 
 

   overflow 
  : 
  hidden; 
 
 
  } 
 
 
  . 
  item 
  { 
 

   background 
  : 
  gray; 
 

   width 
  : 
  80 
  %; 
 

   margin-left 
  : 
  10 
  %; //让item居中 
 

   padding-bottom 
  : 
  30 
  %; //padding的百分比是按container的width算的 
 
 
  } 
 
 
  < 
  /style> 
 
 
  </head> 
 
 
  <body> 
 
 
  <div 
  class= 
  " 
  container 
  " 
  > 
 
 
  <div 
  class= 
  " 
  item 
  " 
  > 
 

   111111111111111111 
 
 
  </div> 
 
 
  </div> 
 
 
  </body> 
 
 
  </html> 
 