If it were me, I would probably use jquery. First give ul a fixed height, and use jquery to give it a variable height. Then use FW or inspect the element to check the height of li, and use ul height-nli height. If nli>ul height, use jquery to split the remaining li, and then use jquery to put the excess li into the new ul. The approximate code is as follows
var ul-height = 500px;
var li-height = 40px;
vat li-sum = $("ul li").length;
if(ul-height < li-height*li-sum){
Then use the warp function to put the remaining li into the new ul. Note that ul must use float:left; and the width must be sufficient to accommodate several uls. Forgive me that I am eating in a restaurant and cannot give out all the codes. I have given you the ideas and the general code
}
You can learn about
column
layout in CSS.Demo:
http://jsfiddle.net/0vom7o9k/5/
For compatibility, see: http://caniuse.com/#search=column
I am here to cast black magic, just laugh it off...~_~ http://jsfiddle.net/0vom7o9k/2/
If it were me, I would probably use jquery. First give ul a fixed height, and use jquery to give it a variable height. Then use FW or inspect the element to check the height of li, and use ul height-nli height. If nli>ul height, use jquery to split the remaining li, and then use jquery to put the excess li into the new ul. The approximate code is as follows
var ul-height = 500px;
var li-height = 40px;
vat li-sum = $("ul li").length;
if(ul-height < li-height*li-sum){
Then use the warp function to put the remaining li into the new ul. Note that ul must use float:left; and the width must be sufficient to accommodate several uls. Forgive me that I am eating in a restaurant and cannot give out all the codes. I have given you the ideas and the general code
}
It is indeed black magic. high! I don’t know how compatible it is with other browsers~