如何錨定圖像以使文本不會移動它？

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;
}