我使用較大網(wǎng)格內(nèi)的 CSS 網(wǎng)格區(qū)域創(chuàng)建了一個簡單的水平平鋪布局。磁貼中的內(nèi)容是根據(jù) javascript 和 json 文件動態(tài)創(chuàng)建的。并非每個圖塊都包含相同數(shù)量的信息。磁貼底部可能會出現(xiàn)三個可能的鏈接。我使用三元運(yùn)算符根據(jù)鏈接的存在來包含/排除所需的 html。如果嵌套對象中的第一個鏈接可用，它還會起到雙重作用，作為左側(cè)可單擊圖標(biāo)的鏈接。如果 json 文件中沒有鏈接，圖像將變?yōu)殪o態(tài)，并且圖塊底部不會出現(xiàn)鏈接。由于某種原因，如果包含第一個鏈接，左側(cè)的圖像將與左上角而不是中心對齊。如果沒有第一個鏈接，圖像就會完美排列。顯示的圖像表示當(dāng)前輸出，其中第一個鏈接包含在一個圖塊中，而第一個鏈接不包含在另一個圖塊中我無法弄清楚為什么定義的網(wǎng)格區(qū)域會發(fā)生這種情況。無論 Link1 是否存在，圖像都應(yīng)該跨越整個網(wǎng)格區(qū)域。const list1List = document.getElementById('list1List');let trackInfo = [];async function loadTracks() {? ? try {? ? ? ? const res = await fetch('proprietaryfile.json');? ? ? ? trackInfo = await res.json();? ? ? ? displayBrowserTracks(trackInfo);? ? } catch (err) {? ? ? ? console.error(err);? ? }};function displayList1Tracks(tracks) {? ? const htmlString = tracks? ? ? ? .map((track) => {? ? ? ? ? ? ? ? const app = `${track.app}`? ? ? ? ? ? ? ? const subheading = `${track.subheading}`? ? ? ? ? ? ? ? if (app == "SuperThing" && subheading == "Tracks") {? ? ? ? ? ? ? ? ? ? return `? ? ? ? ? ? ? ? ? ? <li class="track">? ? ? ? ? ? ? ? ? ? <h6>${track.name}</h6>? ? ? ? ? ? ? ? ? ? ${(track.blurb ? `<p id="track-blurb">${track.blurb}</p>` : '')}? ? ? ? ? ? ? ? ? ? ${(track.links.link1 ? `<a href="${track.links.link1}" target="_blank"><img id="track-image" src="${track.image}"></img></a>`:`<img id="track-image" src="${track.image}"></img>`)}? ? ? ? ? ? ? ? ? ? <div class="track-links">? ? ? ? ? ? ? ? ? ? ${(track.links.link1 ? `<a class="track-links" id="link1" href="${track.links.link1}" target="_blank">Example</a>` : '')}? ? ? ? ? ? ? ? ? ? ${(track.links.link2 ? `<a class="track-links" id="link2" href="${track.links.link2}" target="_blank">URL</a>` : '')}? ? ? ? ? ? ? ? ? ? ${(track.links.link3 ? `<a class="track-links" id="link3" href="${track.links.link3}" target="_blank">Docs</a>` : '')}? ? ? ? ? ? ? ? ? ? </div>? ? ? ? ? ? ? ? ? ? </li>`;? ? ? ? ? ? }? ? ? ? })? ? ? ? .join('');? ? ? ? list1List.innerHTML = htmlString;};我已經(jīng)更改了這篇文章的大部分 id、類和一些元素，但希望這足以描繪出一幅圖畫。我嘗試過應(yīng)用不同的網(wǎng)格行值、修復(fù)圖像位置、更改行和列之間的間距、更改模板文字，但都無濟(jì)于事。我在這里做錯了什么？