根据CSS完成每列4行载入完1列后数据信息全自动填

日期:2021-03-03 类型:科技新闻 

关键词:怎么把小程序变成二维码,微信小程序怎么开通,微信小程序csdn,小程序开发,网络答题小程序

只用css完成“每列4行,载入完1列后数据信息全自动填充到下1列”的实际效果。这个题型用图表明以下:

假如将题型换为“只用css完成每行4列,载入完1行后数据信息全自动填充到下1行”,那这个难题就简易多了,坚信大伙儿都能应用多种多样方式完成。但如今这个难题该如何去处理呢。

对了这个题型,好像并不是那末好处理,终究像这类难题大家全是应用js或模板輔助完成的。

这个题型难点在哪儿儿?

对动态性加上的数据信息只用css完成这个实际效果,那就代表着除动态性加上数据信息外,不能能更改现有的文本文档构造。甚么意思呢?例如针对这类完成,大家可使用ul>li构造,但除提升li(非常于加上数据信息层)外,不能能在原文本文档中加上1个ul或别的的html标识。

这个难题也就变为了针对同1个ul下的li怎样设定它们的不一样的特性,使其在第5个之后“浮到”另外一列?(注:此处是笔者所用的构造,大伙儿能够选用别的构造开展)

难题剖析到这儿,我的第1反映是用nth-child这个特性,对li:nth-child(5)、li:nth-child(6)、li:nth-child(7)...各自设定精准定位特性,这样在提升第5个、第6个、第7个数据信息时便可将其显示信息到对应的部位了。但这样针对动态性加上的数据信息这样写是不符合适的,终究大家不知道道有是多少条数据信息,并且精准定位时也必须测算当今li必须的left、top值。(大伙儿有兴趣爱好可使用scss等扩展下这个思路)

处理方式:

在这里我想详细介绍另外一种完成方式,应用css3的column分列有关特性(此中方式在ie11才有适用,别的访问器必须加对应的访问器前缀);

先贴出我的有关编码:

1) html构造编码:

CSS Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4. <title>test</title>   
  5. </head>   
  6. <body>   
  7. <ul></ul>   
  8. </body>   
  9. </html>  

2) js编码(注:此处的js只是用于转化成数据信息

CSS Code拷贝內容到剪贴板
  1. <script type="text/javascript">   
  2.     window.onload = function() {   
  3.         var oul = document.getElementsByTagName('ul')[0];   
  4.         for(var i=0; i<9; i++){   
  5.             var _li = document.createElement('li');   
  6.             _li.innerText = i+1;   
  7.             oul.appendChild(_li);   
  8.         }   
  9.     };   
  10. </script>  

3) css编码(重要一部分)

CSS Code拷贝內容到剪贴板
  1. <style type="text/css">   
  2. ul{   
  3.     margin:0px;   
  4.     padding:0px;   
  5.     height:200px;   
  6.     width100px;   
  7.     text-aligncenter;   
  8.     -moz-column-gap: 12px;   
  9.     -moz-column-count: 1;   
  10.     -moz-column-rule: 1px solid #d8d8d8;   
  11.     -webkit-column-gap: 12px;   
  12.     -webkit-column-count: 1;   
  13.     -webkit-column-rule: 1px solid #d8d8d8;   
  14.     column-gap: 12px;   
  15.     column-count: 1;   
  16.     column-rule: 1px solid #d8d8d8;   
  17.  }   
  18. ul li{   
  19.     height50px;   
  20.     line-height50px;   
  21.  }   
  22. </style>  

以上编码最关键的便是css编码一部分的完成,这即完成了题型的规定,关键特性为ul中的height、width、column有关和li的height特性。

column-count意味着分列数,column-gap表明分列之间的空隙,column-rule则表明列之间的切分线;

此处设定ul高为200px,每一个li高50px,这样便是当列满4个时,分到第2列。

显示信息結果如图所示:

以上所述是网编给大伙儿详细介绍的根据CSS完成每列4行载入完1列后数据信息全自动填充到下1列,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!