在css中使用float时,jqGrid标头变大

Question

我有一个jqGrid显示完全正常.

然后我开始开发一个基本的站点布局结构并遇到问题:jqGrid的标题变得非常庞大!:)

这是截图.

页面结构:

<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的标题会恢复正常大小(尽管布局的其他部分搞砸了))

另外我注意到浮子标题正好向右侧边栏的高度调整,所以看起来它试图漂浮它......

我还尝试通过在jgGrid之前放置<br style="clear:both" />来清除浮动,但是它将它移到了侧边栏之外的页面底部,这不是我想要的.

我只是迈出了css/html/jqgrid的第一步,所以我可以错过一些非常明显的东西:-)

Answer 1

首先,在我看来,你必须确定以下的margin价值#centralpart

#centralpart {
    margin: 0px 320px 0px 170px;
    text-align: center;
    background-color:red
}

要解决您的主要问题,您应该明确设置heighttitelbar div div.ui-jqgrid-titlebar:

div.ui-jqgrid-titlebar {
    height: 16px;
}

就像您在演示中看到的那样,在更改后结果会更好.(我background-color在每个div中都包含了更清楚每个div的大小.