顶部对齐正方形内的文本答案

【问题标题】：Top align text inside a square顶部对齐正方形内的文本
【发布时间】：2021-12-23 19:04:18
【问题描述】：

我有 3 个同心方块。我想添加一个简单的等式并在外部正方形的顶部询问 X（div 类“祖父母”）“输入 x 的值：”。我希望它在祖父母和父母方格内的中心（子）方格中表达的结果。但是我不能使外部正方形中的文本在顶部对齐，并且当将文本添加到外部正方形时，它会覆盖内部的其他正方形。我尝试使用 z-index 但它不起作用：/，我只能看到红色的外方块我试图制作一个可运行的 sn-p，但运行后它没有将其插入此处。所以我留下这个链接。 https://jsfiddle.net/olbapnairda/5d9boreL/3/

var x = window.prompt("Enter a value of X ");
var square = x => x * x
console.log("The value of square is: " + square(x));
document.querySelector(".grandparent").innerHTML = x;
document.querySelector(".child").innerHTML = square(x);

body {
  margin: 0;
  min-height: 100vh;
}

body,
div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grandparent {
  width: 200px;
  height: 200px;
  background-color: red;
  align-items: top;
  z-index=0;
}

.parent {
  width: 130px;
  height: 130px;
  background-color: blue;
}

.child {
  width: 60px;
  height: 60px;
  background-color: green;
  z-index: 1;
}

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

【问题讨论】：

document.querySelector(".grandparent").innerHTML = x; 将覆盖所有内部 HTML，因此您会丢失父子 div
是的，我也在寻找 innerHTML 的替代品。我认为使用它不是一个很好的做法。

标签： javascript html css text alignment

【解决方案1】：

添加：

<h6 class="input"></h6>

在祖父母 div 和变化：

 document.querySelector(".grandparent").innerHTML = x;

收件人：

 document.querySelector(".input").innerHTML = x;

看看这个link

【讨论】：

【解决方案2】：

我相信这就是你要找的。p>

您的代码覆盖了内部 HTML，因此删除了父 div 和子 div，所以让我们尝试一些不同的方法：

var square = x => x * x

function myFunction() {
  let item = document.getElementById("xinput").value;
  console.log(item);
  document.getElementById("child").innerHTML = square(item);
}

body {
      margin: 0;
      min-height: 100vh;
    }
    
    body, div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .grandparent {
    padding:10px;
      display: block;
      justify-content: center;
      align-items: center;
      width: 200px;
      height: 220px;
      background-color: red;
      z-index = 0;
      position: relative;
    }
    
    .parent {
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 130px;
      height: 130px;
      background-color: blue;
    }
    
    .child {
      width: 60px;
      height: 60px;
      background-color: green;
      z-index: 1;
    }
    
    #x {
margin: auto;
display: block;
width: 130px;
}
#xinput {
display: block;
text-align: center;
width:90%;
padding: 5px;
}
button {
display: block;
padding: 5px;
width: 100%;
}

<div class="grandparent">
  <div id="x">
    <input id="xinput" placeholder="value of x" >
    <button onClick="myFunction()">submit</button>
  </div>
  <div class="parent">
    <div id="child" class="child"></div>
  </div>
</div>

【讨论】：