在css中使用float时，jqGrid标头变大 [英] jqGrid header becomes big when using float in css

问题描述

我有一个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 ; before jgGrid，but that moved it to the bottom of the page beyond sidebars，这不是我想要的。

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 :-)

推荐答案

必须修改 margin 的价值 #centralpart 到以下

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

要解决你的主要问题， set height of titelbar div div.ui-jqgrid-titlebar 显式：

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.

这篇关于在css中使用float时，jqGrid标头变大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！