我有一个显示完美的 jqGrid。
然后我开始开发一个基本的站点布局结构并遇到了问题:jqGrid 的标题变得非常大! :)
这是 screenshot .
页面结构:
<div id="sidebar1" />
<div id="sidebar2" />
<div id="centralpart">
<div id="jqgrid">....</div>
</div>
和CSS:
#sidebar1 {
float: left;
width: 150px;
padding: 10px 10px;
}
#sidebar2 {
float: right;
width: 300px;
padding: 10px 10px;
}
#centralpart {
margin: 0 300px 0 150px;
text-align: center;
}
我检测到东西因为 float 而损坏:一旦我删除它们,jqGrid 的标题就会恢复正常大小(尽管布局的其他部分变得困惑 ;))
我还注意到 float 标题正好向下跨越右侧边栏的高度,所以看起来它试图 float 它......
我还尝试通过在 jgGrid 之前放置
来清除 float ,但这将它移到了侧边栏之外的页面底部,这不是我想要的.
我只是迈出了 css/html/jqgrid 的第一步,所以我可能会错过一些非常明显的东西:-)
最佳答案
首先,在我看来,您必须将 #centralpart
的 margin
值固定为以下值
#centralpart {
margin: 0px 320px 0px 170px;
text-align: center;
background-color:red
}
要解决您的主要问题,您应该明确设置 titelbar div div.ui-jqgrid-titlebar
的 height
:
div.ui-jqgrid-titlebar {
height: 16px;
}
就像您在 the demo 上看到的那样更改后结果会好很多。 (我在每个 div 中包含了 background-color
,以便更清楚地看到每个 div 的大小。
关于css - 在 css 中使用 float 时 jqGrid 标题变大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8057154/