css - 如何固定 ul 的高度,使里面的 li 每列只显示一定的数量,多余的再另开一列?
PHP中文网
PHP中文网 2017-04-17 11:23:37
0
4
914

就像 Bootstrap 的栅格系统,不过这个是垂直的

PHP中文网
PHP中文网

认证高级PHP讲师

reply all(4)
洪涛

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/

PHPzhong

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~

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template