如何防止元素被DOM包裹-有解無憂

我似乎無法阻止這些塊包裝。對于小于 50 的輸入，網格似乎作業正常。

這是我的 HTML，但沒有太多，甚至嘗試了行內的空白屬性。CSS，我已經制作了一個父 div，它似乎適用于顏色，但不適用于關閉包裝。

我怎樣才能讓一排排的盒子繼續？

在此處輸入圖片說明

let makeGrid = function(numberOfRows) {
  let y = 0;
  let x = 0;

  while (y < numberOfRows) {
    x = 0;

    let makeBox = function(_parentBox, _sizeOfBox) {
      let box = document.createElement('div');
      document.body.appendChild(box);
      box.style.width = '28px';
      box.style.height = '28px';
      box.style.border = '1px solid white';
      box.style.display = 'inline-block';
      return box;
    };

    let makeRowBox = function(parentBox) {
      let box = document.createElement('div');
      parentBox.appendChild(box);
      //box.style.border = '1px solid black';
      return box;
    };

    rowBox = makeRowBox(document.body);

    while (x < numberOfRows) {
      makeBox(rowBox, 400);
      x = x   1;
    }

    y = y   1;
  }
};

makeGrid(50);

div {
  background-color: rgb(68, 157, 230);
  white-space: nowrap;
  overflow: hidden;
}

div>div {
  display: inline-block;
  border: 2px solid white;
  border: '1px solid black';
  margin-right: 4px;
}

<div style="white-space: nowrap;"></div>

uj5u.com熱心網友回復：

您可以使用來設定 boxRows 的樣式display: inline-flex，因此行將擴展以適應其內容。

我洗掉了在 javascript 中設定的所有行內 CSS。相反，我在框中添加了一個類。

您還將所有藍色框添加到body而不是.row(rowBox)。

我需要結合float和clear使較小的網格行中斷。

let makeGrid = function(numberOfRows) {
  let y = 0;
  let x = 0;

  while (y < numberOfRows) {
    x = 0;

    let makeBox = function(_parentBox) {
      let box = document.createElement('div');
      box.classList.add("box");

      //document.body.appendChild(box);

      _parentBox.appendChild(box); /* added */
      
      //return box;
    };

    let makeRowBox = function(parentBox) {
      let box = document.createElement('div');
      box.classList.add("row");
      
      parentBox.appendChild(box);
      
      return box;
    };

    rowBox = makeRowBox(document.body);

    while (x < numberOfRows) {
      makeBox(rowBox, 400);
      x = x   1;
    }

    y = y   1;
  }
};

makeGrid(30);

.row {
  display: inline-flex;
  border: 1px solid black;
  clear: both;
  float: left;
}

.box {
  --box-spacing: 2px;

  width: 28px;
  height: 28px;
  background-color: rgb(68, 157, 230);
  border: var(--box-spacing) solid white;
  flex-basis: 100%;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/341502.html

標籤：javascript css dom

上一篇：如何防止將相同的文本傳遞給同一頁面上的另一個幻燈片？

下一篇：如何在JavaScript中通過XPATH獲取元素？