码迷,mamicode.com
首页 > 编程语言 > 详细

html span从上往下,从左往右排序

时间:2020-04-06 15:30:06      阅读:351      评论:0      收藏:0      [点我收藏+]

标签:lex   tle   wrap   htm   nta   body   page   div   containe   

<html> 
<head> 
<meta charset="utf-8"/> 
<title>从上往下,从左往右</title> 
<style> 
    #flex-container {flex-flow:column wrap; } 

    #flex-container > :nth-child(4n - 2) { order: 1; }
    #flex-container > :nth-child(4n - 1) { order: 2; }
    #flex-container > :nth-child(4n - 0) { order: 3; }
    #flex-container > :nth-child(-n + 4) {
        page-break-before: always; /* Old syntax */
        break-before: always;  /* New syntax */
        border-top: 1px solid;
    }
</style> 
</head> 
<body> 

<div id="flex-container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
</div>

</body> 
</html> 

 

html span从上往下,从左往右排序

标签:lex   tle   wrap   htm   nta   body   page   div   containe   

原文地址:https://www.cnblogs.com/QW-lzm/p/12642126.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!