css扩展之aspect-ratio(纵横比)

By admin at 2017-11-13 • 0人收藏 • 967人看过


以后界面基本框架不再每次提供,直接提供官方html和css实现代码,后面再做仔细研究

<html>
<head>
  <style>
    ul.picture-list
    {
      flow:h-flow;
      padding:0;
      border-spacing:2px;
    }
    ul.picture-list > li 
    { 
      display:block;
      width:30%;
      height: width(30%);
      
      border:1px solid green; 
    }
    ul.picture-list > li:nth-child(3n) // three elements in the row
    { 
      clear:right;
      margin-right:50%%;
    }
  </style>  
<head>
<body>
Each green rectangle here shall maintain aspect ratio (10:3) while resizing.
<ul .picture-list>
  <li>Some picture 1</li>
  <li>Some picture 2</li>
  <li>Some picture 3</li>
  <li>Some picture 4</li>
  <li>Some picture 5</li>
  <li>Some picture 6</li>
  <li>Some picture 7</li>
  <li>Some picture 8</li>
  <li>Some picture 9</li>
</ul>

</body>
</html>

gifTest1.gif


登录后方可回帖

登 录
信息栏
本站永久域名:HtmLayout.Cn
纯私人站,当笔记本用的,学到哪写到哪,目前在学aardio+halcon机器视觉.
加入本站专享群:783804676
AARDIO语言QQ大群:70517368
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
C大Aardio论坛:Aar爱好者论坛
本 站 主 站:Stm32cube中文网
Sciter中文在线文档Sciter在线学习文档
赞助商:才仁机械
下载站:
非凡软件站



Loading...