怎么写css和js实现如下效果，求大神请教
0
最佳答案
0
<html> <head> <title></title> <script type="application/javascript" src="scripts/jquery-2.1.3.min.js"></script> <script type="application/javascript"> function Output(data) { var width=$("#d").css("width"); var i=data.length; while(i>0) { var div="<div style=\"width:100%\"><ul>"; for(var n=0;n<i;n++) { div+="<li style=\"width:"+((100/i)-0.1*data.length)+"%\">"+data[n]+"</li>"; } div+="</ul></div>"; $("#d").append(div); i--; } } </script> <style type="text/css"> #d{ width:500px; } div{ margin: 1px; clear: both; } ul{ margin: 1px; } li{ list-style: none; background: gray; text-align:center; display: inline-block; margin: 1px; } </style> </head> <body> <div id="d"></div> <script type="application/javascript"> Output(["a","b","c","d","e"]); </script> </body> </html>
收获园豆：10
虽然问题已经解决了，但是你的代码也是可行的方法。谢谢
其他回答(4)
0
如果我来做，就用Bootstrap，可以看下Boostrap的这个示例，http://v3.bootcss.com/examples/grid/
这样也不好判断数据库读取出了多少条数据啊
0
用js算宽度就好了哇。。。
小女子不知，望大神再指点一二
非常感谢
0
问题描述的不是很清楚呢。是想排成4个-3个-2个-1个这样还是每个li的宽度因为文字数不同而不定？ 如果单纯的想排成这样，25% 33% 50% 100%就好了。如果想要宽是后台定直接通过js获取或者传入宽度值。
0
一：如果出现3个-3个-2个-1个，是不是也按这种排列方式排列？
二：如果是的话，1.查询数据库汇总共有多少条数据，以确定共有多少行，计算公式：(1+n)*n/2=总条数；
2.获多少行后，每行的宽度为(100%/index) index代表倒数第几行；
3.最上面一行可能出现1个，2个或3个等情况，这种情况得你自己决定怎么安排。
三：可以使用jQuery AJAX获得数据。
虽然问题已经解决了，但是还是谢谢你的回答
@久奺: 可以问一下你的解决思路吗？
