在css中使用float时，jqGrid标题变大

Question

我有一个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;
}

我发现事情因浮动而破坏：一旦我删除它们，jqGrid的标题会恢复正常大小（虽然布局的其他部分搞砸了））

此外，我注意到浮动标题正好按右侧边栏的高度向下跨度，所以看起来它试图漂浮它...

我还尝试通过在jgGrid之前放置＆lt; br style =“clear：both”/＆gt; 来清除浮动，但是它将它移到了侧边栏之外的页面底部，这不是什么我想要。

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

Answer 1

首先，在我看来，您必须将margin的{​​{1}}值修改为以下

#centralpart

要解决您的主要问题，您应该明确设置titelbar div #centralpart { margin: 0px 320px 0px 170px; text-align: center; background-color:red } 的{​​{1}}：

height

就像你在the demo上看到的那样，改变后的结果会好得多。 （我在每个div中都包含了div.ui-jqgrid-titlebar，以便更清楚地了解每个div的大小。