我有一些div。測(cè)試用網(wǎng)格-模板-列:自動(dòng)自動(dòng)自動(dòng)；因?yàn)槲蚁Ｍ袑捪袢Q于元素寬度的flex效果一樣，并且還要justify-content:start；將列向左對(duì)齊，這也是我使用auto而不是1fr的原因，因?yàn)槲也幌Ｍ斜焕斓奖M可能長(zhǎng)的寬度。

問(wèn)題是我不知道如何像表格一樣整齊地對(duì)齊列，正如你在下面的例子中看到的，第二個(gè)div的p .target。測(cè)試比第一個(gè)更長(zhǎng)，我試圖實(shí)現(xiàn)的是使所有其他列寬遵循最長(zhǎng)的一個(gè)。

附:我不想用桌子。我也可以使用JavaScript找到最長(zhǎng)的一個(gè)，并將所有其他的寬度設(shè)置為這個(gè)值。我只是想看看是否有一個(gè)簡(jiǎn)單的只使用CSS的解決方案。

p {
  margin: 0;
}

.test {
    column-gap: 30px;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: start;
}

p:nth-child(2) {
    position: relative;
    width: 120px;
}

.flex {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    left: 0;
    right: 0;
}

<div class="test">
  <p class="target">Hello</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>
<div class="test">
    <p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>

重構(gòu)您的HTML，以便在單個(gè)網(wǎng)格中添加所有項(xiàng)目，并使用內(nèi)聯(lián)網(wǎng)格:

<div class="test">
  <p class="target">Hello</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
  <p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>

.test {
  display: inline-grid;
}

請(qǐng)注意，您必須將每行的第二個(gè)元素作為更復(fù)雜的第n個(gè)子元素的目標(biāo):

p:nth-child(3n + 2) {}

試試看:

.test {
  display: inline-grid;
}

p:nth-child(3n + 2) {
  position: relative;
  width: 120px;
}


/* Demo only */

p {
  margin: 0;
  background: #ddd;
}

.test {
  column-gap: 30px;
  grid-template-columns: auto auto auto;
  justify-content: start;
}

.flex {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  left: 0;
  right: 0;
}

<div class="test">
  <p class="target">Hello</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
  <p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>

如果您希望網(wǎng)格列的行為像一個(gè)表，您需要將項(xiàng)目放在一個(gè)網(wǎng)格容器中，而不是兩個(gè)獨(dú)立的容器中:

<div class="test">
    <p class="target">Hello</p>
    <p><span class="flex">Helloooooooooooooo</span></p>
    <p>Hello</p>
    <p class="target">Hellooo</p>
    <p><span class="flex">Helloooooooooooooo</span></p>
    <p>Hello</p>
</div>

要設(shè)置每行第二個(gè)元素的寬度，只需在網(wǎng)格布局中指定寬度:

grid-template-columns: auto 120px auto;

但是如果我們現(xiàn)在去掉p:n-child(2)選擇器，我們就有了。flex元素完全靠著網(wǎng)格放置，而不是p元素，這會(huì)打亂布局。

但實(shí)際上，您可以完全擺脫絕對(duì)定位，而不會(huì)弄亂布局，并將溢出屬性應(yīng)用于所有網(wǎng)格項(xiàng)目，如下所示:

.test > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

下面是生成的更簡(jiǎn)潔的代碼:

p {
  margin: 0;
}

.test {
  column-gap: 30px;
  display: grid;
  grid-template-columns: auto 120px auto;
  justify-content: start;
}

.test > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="test">
  <p class="target">Hello</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
  <p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>