Question

我使这个函数产生16列和行。但我希望它们所在的div位于右侧，所以出于某些原因，我似乎无法通过（内联）更改div CSS。我猜这个功能有问题吗？谢谢你的帮助。

<html>
<body>
  <div id="buttonContainer">
    <button></button>
  </div>

  <div id="gridContainer" style = "left: 500px;">
  </div>

</body>

<script>

  const buttons = document.querySelector("#buttonContainer");

  const btn1 = document.createElement("button");
  btn1.classList.add("btn1");
  buttonContainer.appendChild(btn1);

  function divs(){
    const gridContainer = document.querySelector("#gridContainer");
    for(var i = 0; i < 17; i++){
      var row = document.createElement("div");
      row.className = "row";
      for(var x = 1; x <= 17; x++){
        var cell = document.createElement("div");
        cell.className = "gridsquare";
        cell.innerText = (i);
        row.appendChild(cell);
      }
     gridContainer.appendChild(row);
    }
  }
  divs();

</script>
</html>

Answer 1

将div向右移动有多种方法。一个是给它position:absolute（因此它可以自由移动），然后应用right : 0。

我还删除了错误的<button部分。

const buttons = document.querySelector("#buttonContainer");

const btn1 = document.createElement("button");
btn1.classList.add("btn1");
buttonContainer.appendChild(btn1);

function divs() {
  const gridContainer = document.querySelector("#gridContainer");
  for (var i = 0; i < 17; i++) {
    var row = document.createElement("div");
    row.className = "row";
    for (var x = 1; x <= 17; x++) {
      var cell = document.createElement("div");
      cell.className = "gridsquare";
      cell.innerText = (i);
      row.appendChild(cell);
    }
    gridContainer.appendChild(row);
  }
}
divs();

#gridContainer{
  position : absolute;
  right: 0;
}

<div id="buttonContainer"></div>

<div id="gridContainer"></div>

编辑：使用Flexbox

的更现代/更强大的解决方案

position:absolute的问题在于它将元素与DOM的其余部分“分离”，因此其他元素开始将它们置于其下面，并且它可能很快导致布局噩梦。

这是Flexbox的另一种选择：

.parent{
   border : blue solid 2px;
   height: 200px;
   width: 100%;
   
   display: flex;
   justify-content: flex-end;
}

.child {
   flex-basis : 150px; /* This is like width:150px */
   background : green;
}

<div class="parent">
   <div class="child"></div>
</div>

css不影响div

1 个答案: