如何在两行布局下将jqxGrid表格移至屏幕最右侧

我明白你的需求啦——现在你的jqxGrid和顶部的下拉、输入框挤在同一行中间，你想把它挪到屏幕最右侧，同时保持两行布局的结构对吧？咱们可以通过调整Flex布局的属性来实现这个效果，很简单的！

问题分析 #

你当前的.row样式设置了justify-content: center，这会让所有子元素都居中排列，导致表格没办法独立靠右。咱们只需要针对第一行布局做微调，就能让表格自动“靠”到最右边。

具体修改方案 #

1. 调整HTML结构

给第一行的div.row添加一个专属类名row-top，方便我们单独控制它的布局：

<div class="row row-top">
  <!-- 原有内容不变 -->
</div>

2. 更新CSS样式

修改Flex布局属性，让表格所在的区块自动靠右：

.row {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/* 新增：单独控制第一行布局 */
.row-top {
  justify-content: flex-start; /* 子元素从左侧开始排列 */
  align-items: flex-start; /* 让表格和输入框顶部对齐 */
}

/* 让表格所在的block自动靠右 */
.row-top .block:last-child {
  margin-left: auto;
}

.block {
  padding: 5px 1%;
}

input {
  display: block;
  height: 22px; /* 和select保持同高 */
  border-radius: 4px;
}

input[type="submit"] {
  height: 28px; /* 和select、输入框保持同高 */
  margin-right: 100px
}

select {
  width: 150px; /* 完整显示下拉选项文本 */
}

/* 可选：给表格设置合适的宽度，避免超出 */
#jqxgrid {
  width: 500px;
}

3. 完整代码示例

<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet" />
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<div class="row row-top">
  <div class="block">
    <label class="label" for="startLane">Select Dropdown:</label>
    <select name="seqlineupspendinglist">
      <option value="-">--Please Select--</option>
    </select>
  </div>
  <div class="block">
    <label class="label" for="startLane">Starting Lane #:</label>
    <input type="text" id="startLane" name="startLane" />
  </div>
  <div class="block">
    <label class="label" for="endLane">Ending Lane #:</label>
    <input type="text" id="endLane" name="endLane" />
  </div>
  <div class="block">
    <input type="submit" value="Show Cases" />
  </div>
  <div class="block">
    <div>
      <label class="label">Information:</label>
    </div>
    <div>
      <div id="jqxgrid"></div>
    </div>
  </div>
</div>

<div class="row">
  <div class="block">
    <label class="label" for="startLane">Second Row Test</label>
    <input type="text" id="startLane" name="startLane" />
  </div>
  <div class="block">
    <label class="label" for="startLane">Second Row Test</label>
    <input type="text" id="startLane" name="startLane" />
  </div>
  <div class="block">
    <label class="label" for="endLane">Second Row Test</label>
    <input type="text" id="endLane" name="endLane" />
  </div>
</div>

.row {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.row-top {
  justify-content: flex-start;
  align-items: flex-start;
}

.row-top .block:last-child {
  margin-left: auto;
}

.block {
  padding: 5px 1%;
}

input {
  display: block;
  height: 22px;
  border-radius: 4px;
}

input[type="submit"] {
  height: 28px;
  margin-right: 100px
}

select {
  width: 150px;
}

#jqxgrid {
  width: 500px;
}

$('[name="seqlineupspendinglist"]').select2();

var source = {
  localdata: "",
  datafields: [{
    name: 'Name',
    type: 'string'
  }, {
    name: 'Color',
    type: 'string'
  }, {
    name: 'plateName',
    type: 'string'
  }, {
    name: 'date',
    type: 'date'
  }],
  datatype: "array"
};

var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
  width: 500,
  theme: 'energyblue',
  source: adapter,
  sortable: true,
  ready: function() {
    $("#jqxgrid").jqxGrid('selectrow', 0);
    $('#jqxgrid').jqxGrid('focus');
  },
  columns: [{
    text: 'Name',
    datafield: 'Name',
    columngroup: 'Name',
    width: 90
  }, {
    text: 'Color',
    columngroup: 'Color',
    datafield: 'Color',
    width: 90
  }, {
    text: 'Plate Name',
    datafield: 'plateName',
    width: 170
  }, {
    text: 'Date',
    datafield: 'date',
    width: 160,
    cellsformat: 'dd-MMMM-yyyy'
  }]
});

这样修改之后，顶部的下拉框、输入按钮会靠左排列，jqxGrid表格则会自动移动到屏幕最右侧，完全符合你想要的布局效果~

备注：内容来源于stack exchange，提问作者Tan