在css中使用float时jqGrid标题变大
我的 jqGrid 显示完美.
I had a jqGrid displaying perfectly ok.
然后我开始开发一个基本的站点布局结构并遇到问题:jqGrid 的标题变得非常大!:)
Then I started to develop a basic site layout structure and got into problem: jqGrid's header got really huge! :)
这是屏幕截图.
页面结构:
<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;
}
我检测到由于浮动而损坏了:一旦我删除它们,jqGrid 的标题就会恢复正常大小(尽管布局的其他部分会变得混乱;))
I detected that things broke because of floats: once I remove them jqGrid's header goes back to normal size (although other parts of layout get messed up ;))
我还注意到,浮动标题正好向下跨越右侧边栏的高度,所以看起来它试图浮动它......
Also I noticed that with floats header spans down exactly by amount of height of the right sidebar, so it looks like it tries to float it...
我还尝试通过将 <br style="clear:both"/> 放在 jgGrid 之前来清除浮动,但这将其移到了侧边栏之外的页面底部,这不是什么我要.
I also tried to clear floats by putting <br style="clear:both" /> before jgGrid, but that shifted it to the bottom of the page beyond sidebars, that's not what I want.
我只是迈出了 css/html/jqgrid 的第一步,所以我可能会错过一些非常明显的东西 :-)
I'm only taking my first steps to css/html/jqgrid, so I can miss something really obvious :-)
推荐答案
首先在我看来你必须将 #centralpart
的 margin
值固定为以下
First of all it seems to me you have to fix margin
value of #centralpart
to the following
#centralpart {
margin: 0px 320px 0px 170px;
text-align: center;
background-color:red
}
要解决您的主要问题,您应该明确设置标题栏 div div.ui-jqgrid-titlebar
的 height
:
To solve your main problem you should set height
of the titelbar div div.ui-jqgrid-titlebar
explicitly:
div.ui-jqgrid-titlebar {
height: 16px;
}
就像您在演示上看到的那样,更改后的结果会好很多.(我在每个 div 中都包含了 background-color
以更清楚地看到每个 div 的大小.
Like you can see on the demo the results will be much better after the changes. (I included background-color
in every div to see more clear the size of every div.
相关文章