javascript - jqGrid 在屏幕布局中没有正确对齐。缺什么？

Question

在下面的示例中，3 个 jqGrids 没有正确对齐。我创建了这样的 HTML 部分:

<div>
  <h1>Grid 1</h1>
  <table id="Grid1"/>
</div>

<div>
  <h1>Grid 2</h1>
  <table id="Grid2"/>
</div>

<div>
  <h1>Grid 3</h1>
  <table id="Grid3"/>
</div>

您可以在下面的代码片段中试用 JavaScript 的完整代码。页面的外观如下:

我希望它会像

Title 1
Grid1
Title 2
Grid2
Title 3
Grid3

但不像上面的屏幕截图那样混淆。我也对 <span> 进行了同样的尝试, 插入 <br/>在网格之间，添加 style属性和高度属性，都没有成功。

如何解决这个问题？请帮忙。

试用代码片段:

// see: https://free-jqgrid.github.io/getting-started/
// CDN used: https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid
$(function() {
  var gridSampleData = [
      { id: 10, firstName: "Jane", lastName: "Doe1"},
      { id: 20, firstName: "Justin", lastName: "Time" }
    ];
  $("#Grid1").jqGrid({
    autowidth: true, height: 45, 
    colModel: [{name: "firstName"}, {name: "lastName"}],
    data: gridSampleData
  });
  $("#Grid2").jqGrid({
    autowidth: true, height: 45, 
    colModel: [{name: "firstName"}, {name: "lastName"}],
    data: gridSampleData
  });
  $("#Grid3").jqGrid({
    autowidth: true, height: 45, 
    colModel: [{name: "firstName"}, {name: "lastName"}],
    data: gridSampleData
  });
});

<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Canonical jqGrid example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script>

    <div>
      <h1>Grid 1</h1>
      <table id="Grid1"/>
    </div>

    <div>
      <h1>Grid 2</h1>
      <table id="Grid2"/>
    </div>

    <div>
      <h1>Grid 3</h1>
      <table id="Grid3"/>
    </div>

Answer 1

您的 html 表格定义不正确。表格的结束标记被解释为结束 div 标记 - 要更正此问题，请像这样修复您的 html:

<div>
  <h1>Grid 1</h1>
  <table id="Grid1"></table>
</div>

<div>
  <h1>Grid 2</h1>
  <table id="Grid2"></table>
</div>

<div>
  <h1>Grid 3</h1>
  <table id="Grid3"></table>
</div>

享受