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

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

以后界面基本框架不再每次提供,直接提供官方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机器视觉.
Sciter中文在线文档Sciter在线学习文档
本 站 主 站:Stm32cube中文网
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
aardio在线手册Aardio在线手册
C大Aardio论坛:Aar爱好者论坛
简码教程网:简码编程
AARDIO语言QQ群:70517368
赞助商:才仁机械
下载站:非凡软件站
Loading...