是否可以在单个/单独的html元素中创建统一的列

Question

我想创建一个html容器(div)的列表，并将其中的列表项(Div)作为单独的面板列出，但我希望列表是统一的，因此面板中的列应该对齐，如下图所示：

​

​

可见，Col_1的宽度为"BBBBB"，因为这是该列中最宽的内容，Col_2的宽度为"0x12345678"，依此类推。

我还没有发现任何css能够在其父级之外作为网格或表工作，而且由于所有列表项容器都是“网格”的父级，所以它们无法同步。

我一直在尝试创建一个javascript来搜索每个列元素，选择最宽的并设置列中所有其他元素的宽度，将此方法分配给每个元素的DOMSubtreeModified事件，并将这些元素分配给ResizeObserver。

它工作得相当好，但是因为这个列表是动态生成的，所以将每个项目添加到DOM树会触发resize事件，这并不是很好。我尝试在生成列表时禁用调整大小方法，并仅在列表作为一个整体附加到DOM之后才启用它，但随后每个项都会同时调用ResizeObserver事件。即使在所有项目都追加并填充了内容之后从requestAnimationFrame(() => { ... });调用它，这应该只有在所有项目都可见并且其内容没有更改之后才会发生，但所有项目都会触发ResizeObserver，因为它们的大小已经更改。

Javascript是这样的：

// This is called only once on init
var resizeObserver = new ResizeObserver((entries) => {
    for (var entry of entries) {
        var elem = $(entry.target);
        console.log("Elem resized", elem);
        // I should call the resizeColumn() here
    }
});


// The following code is called every time when the list data arrives to listData variable
var listPanel = $("#listPanel");

listData.forEach((entry) => {
    listPanel.append(createListEntry(entry)); // createListEntry() function creates an list item with content
});

requestAnimationFrame(() => {
    listPanel.find("[col-group='Col_1']").each((key, elem) => {
        resizeObserver.observe(elem); // for some reason this triggers the callback immediately
    });
});

resizeColumn("Col_1"); // this should make uniform columns for Col_1 only after showing the list,
                       // but the ResizeObserver calls this function as many times as many items
                       // I have in the list

我真的很想用纯html/css来解决这个问题，但是我不知道对于这个问题有什么解决方案。

我想避免最小宽度/最大宽度类型的解决方案，因为内容是动态的，应该以最优的方式使用空间。

如果没有纯html/css解决方案，那么我应该如何修改我的javascript，使其在显示项目时不触发ResizeObserver？

这是我能得到的最接近的了，但是因为listItem类设置了display: contents，所以我不能让它有背景、边框或任何样式，因为它不再是一个盒子了。如果我可以为每一行添加样式的元素，那就太好了。在下面的评论中，subgrid被推荐，这将是这项工作的最佳选择，不幸的是，只有火狐不支持。

​

html, body {
  padding: 0.5rem;
  background: #121212;
  color: #ffffff;
  font-family: verdana;
}

.listContainer {
  display: inline-grid;
  grid-template-columns: auto auto auto 1fr;  
}

.listItem {
  display: contents;
  background: #45729a;
  border: 1px solid yellow;
}

.listCell {
  background: #ef4536;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin: 0.25rem;
}

<div class="listContainer">
  
  <div class="listItem">
    <div class="listCell">AAA</div>
    <div class="listCell">0x00001</div>
    <div class="listCell">aaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div class="listCell">true</div>
  </div>
  
  <div class="listItem">
    <div class="listCell">BBBBB</div>
    <div class="listCell">0x00</div>
    <div class="listCell">bbbbbb</div>
    <div class="listCell">false</div>
  </div>
  
  <div class="listItem">
    <div class="listCell">C</div>
    <div class="listCell">0x12345678</div>
    <div class="listCell">ccc</div>
    <div class="listCell">true</div>
  </div>
  
</div>

​

Answer 1

我认为这样做的一种方法是，为所有要设置相同宽度的元素设置相同的类名。然后在js中获取它们，比较它们的宽度，然后将最大值设置为每个元素的宽度。

var heights = [];
document.querySelectorAll('.col_1').forEach(col => {
    heights.push(col.offsetHeight);
})

然后使用一些基本算法比较heights列表中的元素，然后将最大值设置为每个人的高度。

document.querySelectorAll('.col_1').forEach(col => {
    col.offsetHeight = 'that_max_value';
})