Question

我有两个 div，每个 div 包含一个表。 div 必须一个接一个地放在同一列中，它们之间没有空格。现在我有这样的 HTML 结构，但是第 1 列第 1 行中的 2 个表格/div 重叠：

pkts = rdpcap('path/to/cap.pcap')
for pkt in pkts:
    if pkt.haslayer(MyLayer):
        del pkt[MyLayer].seq
        del pkt[MyLayer].ack
        del pkt[MyLayer].chk
        del pkt[MyLayer].datachk
        to_send = MyLayer(raw(pkt[MyLayer]))
        ans, unans = ss.sr(to_send)

另一个问题是我也受此结构的限制。我正在使用 Freemarker，并且 div 正在列表中一一添加到网格中。实际代码如下所示：

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
    <div style="grid-row: 1; grid-column: 1;"> {table} </div>
    <div style="grid-row: 1; grid-column: 2;"> {table} </div>
    <div style="grid-row: 1; grid-column: 3;"> {table} </div>
    <div style="grid-row: 1; grid-column: 1;"> {table} </div>
</div>

我的最终目标是有一个 3 列显示，其中每个表在列中一个接一个地列出，之间没有任何空格。这几乎是通过这个设置完成的。如何防止两个 div/table 在同一个网格单元中重叠？

Answer 1

只要不指定 grid-row 和 grid-column，然后如果您定义了 grid-template-columns，其中定义了 3 列，项目将自动进入正确的单元格。

如果出于某种原因，您必须明确给出 grid-row 和 grid-col，那么当然总是使用 gird-row: 1 不会很好。那么你应该做这样的事情：

<#list myMap.values()?chunk(3) as row>
  <#list row as cell>
    ... style="grid-row: ${row?counter}; grid-column: ${cell?counter};" ...
  </#list>
</#list>

更新：

基于您从那时起添加到问题中的图片的其他答案。这是一个有 3 列且只有一行的网格。在网格单元格 div 内，您还有更多 div-s，它们将出现在单元格内的彼此下方。所以：

<div class="myGrid">
  <#list 0..2 as columnIndex>
    <div class="myGridCell">
      <#list myValues?chunk(3) as row>
        <#if row[columnIndex]??>
          <div class="valueBox">
            ${row[columnIndex]}
          </div>
        </#if>
      </#list>
    </div>
  </#list>
</div>

如何防止 div 在同一网格列和行内重叠？

1 个答案: