最近做项目的时候,需要修改jqGrid源代码来修改外观,把模态框(弹出框)从原来的竖直显示变成多列显示,而jqGrid插件是自动根据绑定数据来生成前端样式的,由于对CSS并不熟悉,经过一整天才相处了解决办法
nth-child()用于选择子元素
这是我原创的加入jqGrid源代码的css样式,会根据弹出框的显示条目数来自动决定是否浮动显示(即是直接垂直显示,还是分两列显示)
.ui-jqdialog-content table tr {float:left;padding-left:10px;padding-right:10px}
.ui-jqdialog-content table tr :nth-child(n+9):nth-child(odd):nth-child(n-9){float:left;}
.ui-jqdialog-content table tr :nth-child(n+9):nth-child(even):nth-child(n-9){float:right;}