Question

我有一个固定大小的父div，其中一个16 * 16的子div网格非常适合。我需要找出一种方法来确保如果我想要15 * 15的网格或17 * 17的网格，子div会自动调整大小以适合父级。也就是说，子div的大小取决于提示中调用的数字。

我仍然是一个初学者，并尝试了几种不同的CSS工具（CSS网格和flex-boxes），但是我只能使这些框向下滚动或增大父div的大小，而不能减小或根据需要增加子div的大小。

这将构建网格：

var size = prompt("How many squares?");

function buildGrid(size) {
  var container = document.createElement("div");
  container.className = "container";
  document.body.appendChild(container);
  for (i = 0; i < size * size; i++) {
    var square = document.createElement("div");
    square.className = "square";
    container.appendChild(square);
  }
}

//CALL FUNCTION
buildGrid(size);

这是对应的CSS：


.container {
    width: 384px;
    height: 384px;
    border-style: solid;
    position: relative;
    top: 20%;
    left: 50%;

}


.square {
  border-style: solid;
  border-width: 1px; 
  height: 22px;
  width: 22px;
  float: left;
}

我正在尝试找出如何自动调整孩子的尺寸以适合父母但又挣扎的

Answer 1

尝试percentage width：

.container {
    width: 10%;
    height: 384px;
    border-style: solid;
    position: relative;
    top: 20%;
    left: 50%;

}

或者类似的东西。调整以适应您的需求。

Answer 2

尝试使用百分比。

.container {
    width: 384px;
    height: 384px;
    border-style: solid;
    position: relative;
    top: 20%;
    left: 50%;

}

如果您的容器的宽度为384px，高度为384px，则我们将计算22px / 384px * 100 =约5.73。

.square {
  border-style: solid;
  border-width: 1px; 
  height: 5.73%;
  width: 5.73%;
  float: left;
}

Answer 3

这是您要找的吗？我对您的代码进行了一些调整，并从实际宽度中减去了边框偏移量，以适应大网格中的小对象。我还包括了具有wrap属性的flexbox来实现您尝试的功能。

// var size = prompt("How many squares?");

function buildGrid(size) {
  var container = document.createElement("div");
  container.className = "container";
  document.body.appendChild(container);
  var numberOfSquares = size * size;
  for (i = 0; i < numberOfSquares; i++) {
    var square = document.createElement("div");
    square.className = "square";
    // Minusing 2px from 384px - to adjust the border width
    var borderOffset = size * 2;
    square.style.width = ((384 - borderOffset) / size) + "px";
    container.appendChild(square);
  }
}

//CALL FUNCTION
buildGrid(18);

.container {
  width: 384px;
  height: 384px;
  border-style: solid;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.square {
  border-style: solid;
  border-width: 1px;
}

希望这会有所帮助！

缩小div以适合其他div

3 个答案: