顶部对齐正方形内的文本

Posted 2023-03-05

【中文标题】顶部对齐正方形内的文本

【英文标题】：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 的替代品。我认为使用它不是一个很好的做法。

【参考方案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>