css 如何使HTML网格水平和垂直滚动？

ars1skjm 于 2023-03-09 发布在其他

关注(0)|答案(2)|浏览(189)

我动态生成一个网格，如下所示：

function createGrid(numberOfRows) {
  document.getElementById("container").innerHTML = "";
  console.log(numberOfRows);
  for (let i = 0; i < numberOfRows; i++) {
    var divRow = document.createElement("div");
    document.getElementById("container").appendChild(divRow);
    for (let y = 0; y < numberOfRows; y++) {
      let divCol = document.createElement("div");
      divRow.appendChild(divCol);
    }

  }
}
window.onload = createGrid(10)

#container {
  padding-bottom: 25px;
}

#container>div {
  width: 100%;
  height: 10px;
}

#container>div>div {
  float: left;
  height: 25px;
  border: 1px solid #ccc;
  width: 25px;
}

div {
  display: table;
  margin: auto;
}

<div id="container"></div>

如果网格完全适合屏幕，则此操作将非常有效：

但如果网格更大则断开（例如，使用createGrid（100））：

如何使网格正确显示（显示为带有水平滚动条的正方形）？

css

来源：https://stackoverflow.com/questions/75652952/how-to-make-an-html-grid-scroll-horizontally-as-well-as-vertically

2条答案

按热度按时间

wfveoks01#

不要使用浮点数，使用display: grid来显示网格。
在我的解决方案中，我将网格的单元格设置为内联样式，然后在CSS中使用它来定义一行中应该有多少个单元格。

function createGrid(numberOfRows) {
  const container = document.getElementById('container');
  document.getElementById("container").innerHTML = "";
  container.setAttribute('style', `--cells: ${numberOfRows} `);
  console.log(numberOfRows);
  for (let i = 0; i < numberOfRows; i++) {
    for (let y = 0; y < numberOfRows; y++) {
      let divCell = document.createElement("div");
      container.appendChild(divCell);
    }

  }
}
window.onload = createGrid(100)

#container {
  padding-bottom: 25px;
}

#container {
  width: 100%;
  display: grid;
  grid-template-rows: 25px;
  grid-template-columns: repeat(var(--cells), 25px);
}

#container>div {
  height: 25px;
  border: 1px solid #ccc;
  width: 25px;
}

<div id="container"></div>

赞(0）回复(0）举报 2023-03-09

chhkpiq42#

你使用的是display: table，但是有了display: grid和grid-auto-flow属性，它应该可以工作。试试下面的css。

#container {
    padding-bottom: 25px;
    display: grid;   
    grid-auto-flow: row; 
}

#container > div {
    width: 100%;
    display: grid;   
    grid-auto-flow: column;  
}

#container > div > div {
    float: left;
    height: 25px;
    border: 1px solid #ccc;
    width: 25px;
}

赞(0）回复(0）举报 2023-03-09

我来回答

css 如何使HTML网格水平和垂直滚动？

2条答案

相关问题

热门标签

最新问答