在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之前，但这将其移至侧边栏之外的页面底部，这不是我想要的。

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

Answer 1

首先，在我看来，您必须将 #centralpart 的 margin 值修复为以下

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

要解决您的主要问题，您应该将 height 设置为标题栏 div div.ui-jqgrid-titlebar 明确：

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

就像您在 上看到的那样演示 结果将是改变后好多了。 （我在每个 div 中添加了 background-color ，以便更清楚地看到每个 div 的大小。