如何锚定图像以使文本不会移动它？

Question

TLDR：当上面的另一个元素被 JS 操作时，如何防止 img 被重新定位。

我正在介绍编码课程，这周我们正在创建一个计算器，它允许用户输入一个数字并根据这个数量获得总成本（以衬衫为例）。 我想在这个计算器下面添加一个.gif，尽管当用户提交他们的号码后屏幕上显示总金额时，.gif 被向下移动。

输入/按钮和下面的.gif 之间已经有空间，但是添加到屏幕的文本会将.gif 进一步向下移动。 我尝试使用<br clear="top">认为它可以从顶部包装文本以阻止干扰，但这似乎不起作用。 我也试过position: absolute但这也没有用。 使用按钮输入答案后，我将其写成var message = "Your total for "+v+" shirts is $"+total; document.querySelector("#paragraph-1").innerHTML = message; var message = "Your total for "+v+" shirts is $"+total; document.querySelector("#paragraph-1").innerHTML = message; 这条消息影响了.gif。 图片在 CSS img{ width: 50%; display: block; margin-left: auto; margin-right: auto;上设置了自动边距img{ width: 50%; display: block; margin-left: auto; margin-right: auto; .

这是实时编辑的链接： https://jsfiddle.net/6fom3syt/

感谢您的宝贵时间，感谢任何反馈！

Answer 1

解决它的一种简单方法：

<p id="paragraph-1">&nbsp;</p>

不要将p元素留空。

Answer 2

有几种方法可以做你想做的事，但最简单的是使用position: absolute段落。 通过设置position: relative对于段落容器，当你在段落上使用position: relative时，后者将直接引用容器，添加bottom: -3rem到 position 它在输入下方并left translate并使其居中，结果应该是你想要的。

 var cost = 9.99; var subtotal; document.querySelector("#button-1").onclick = click //console.log(document); function click(){ var i = document.querySelector("#input-1"); var v = i.value; console.log(typeof(v)); var subtotal = cost*v; //coercion var total = addTax(subtotal); total = total.toFixed(2); var message = "Your total for "+v+" shirts is $"+total; document.querySelector("#paragraph-1").innerHTML = message; //console.log("button has been clicked", v, subtotal, total); if(v==1){ var message2 = "Your total for "+v+" shirt is $"+total; console.log(message2); document.querySelector("#paragraph-1").innerHTML = message2 } else{ console.log(message); } } function addTax(num){ //var taxRate = 0.13; //var taxAmount = num*taxRate; //var total = num+taxAmount; var tax = 1.13; var total = num*tax; //console.log(total); return total }

 h1{ color: antiquewhite; text-align: center; font-family: 'Georgia', Times New Roman, Times, serif; } #container{ width: 70%; margin: auto; text-align: center; position: relative; } #paragraph-1 { position: absolute; bottom: -2.5rem; left: 50%; transform: translateX(-50%); } body{ background-color: rgb(95, 147, 119); font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; color: antiquewhite; } button{ background-color:rgb(95, 147, 119); color: antiquewhite; border-color: antiquewhite; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; cursor:pointer; } input{ background-color: rgb(95, 147, 119); color:antiquewhite; border-color:antiquewhite; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } img{ width: 50%; display: block; margin-left: auto; margin-right: auto; }

 <.DOCTYPE html> <html> <head> <link rel = "stylesheet" type = "text/css" href = "m3:css"> </head> <body> <div id = "container"> <h1 id= "mainHeading">module 3? functions</h1> <h2>How many shirts would you like to buy:</h2> <button id="button-1">submit</button> <input id="input-1" type="number"> <p id="paragraph-1"></p> </div> <br clear="top"> <p><img src = https.//media3.giphy.com/media/3o6Mb7jQurR1B7mM5G/giphy.gif> </p> <script src="m3.js"></script> </body> </html>

（你仍然应该让它响应或让文本不换行，否则你在输入和图像之间使用的空间是不够的。）

Answer 3

一种简单的方法是通过 css 处理。就像

有一些最小高度，所以 UI 看起来更好。 https://jsfiddle.net/6fom3syt/

#paragraph-1{
  min-height:30px;
}