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

Posted 2021-04-19

在下面的示例中，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的完整代码。以下是页面的外观：

我期待它会出现像

标题1 GRID1 标题2 GRID2 标题3 GRID3

但不像上面的屏幕截图那样混淆。我也尝试使用<span>，在网格之间插入<br/>，添加style属性和height属性，都没有成功。

怎么解决这个问题？请帮忙。

试用它的代码片段：

// 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>

答案

您的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>

请享用

另一答案

如果你只是想让他们在正确的地方？这是答案，但如果你想在下面发表任何评论，请告诉我。

   $(function() {
      var gridSampleData = [
          { id: 10, firstName: "Jane", lastName: "Doe1"},
          { id: 20, firstName: "Justin", lastName: "Time" }
        ];
      $(".any1").jqGrid({
        autowidth: true, height: 45, 
        colModel: [{name: "firstName"}, {name: "lastName"}],
        data: gridSampleData
      });
       $(".any2").jqGrid({
        autowidth: true, height: 45, 
        colModel: [{name: "firstName"}, {name: "lastName"}],
        data: gridSampleData
      });
       $(".any3").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 class"awain">
          <h1>Grid 1</h1>
          <table class="any1"> </table>
        </div>
<br>
      
    <div class"awain">
          <h1>Grid 2</h1>
          <table class="any2"> </table>
        </div>
<br>

<div class"awain">
          <h1>Grid 3</h1>
          <table class="any3"> </table>
        </div>
<br>
   

以上是关于jqGrid在屏幕布局中没有正确对齐。缺什么？的主要内容，如果未能解决你的问题，请参考以下文章

为啥段落文本在默认的 CSS3 多列网站布局中不能正确对齐？

如何在嵌套线性布局中将按钮与屏幕底部对齐[重复]

Android Layout在水平布局中左右对齐

如何在折叠布局下的 CoordinatorLayout 中正确对齐元素？

如何让 jqgrid 冻结列与自动换行一起使用

自动布局对齐问题