[英]How can I anchor an image so text does not move it?
提示:本站为国内最大中英文翻译问答网站，提供中英文对照查看，鼠标放在中文字句上可显示英文原文。
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/
感谢您的宝贵时间，感谢任何反馈！
解决它的一种简单方法：
<p id="paragraph-1"> </p>
不要将p元素留空。
有几种方法可以做你想做的事，但最简单的是使用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>
（你仍然应该让它响应或让文本不换行，否则你在输入和图像之间使用的空间是不够的。）
一种简单的方法是通过 css 处理。就像
有一些最小高度，所以 UI 看起来更好。 https://jsfiddle.net/6fom3syt/
#paragraph-1{
min-height:30px;
}
如何从Textaea中删除所有锚点+锚文本？
[英]How can I remove all anchor + anchor text from a Textaea?
我在textarea中得到这样的东西： 如何删除所有包含的字符Click me! 从< to >使用javascript replace方法或使用类似的东西？ ...
我在div内有5张图像，如何移动单击的图像的位置，使其移动成为div内的第一张图像？
[英]I have 5 images inside a div, and how can i move the position of a clicked image so that it moves to become the very first image inside the div?
基本上，当单击div内的图像一次时，需要移动被单击图像的位置，以使其成为div内的第一张图像，其余图像必须在一个点上随机播放。 我不能为此使用jQuery。 我在javascript中尝试了以下方法： ...
如何使用jquery检查锚文本是否包含图片标签？
[英]How can check if the anchor text contain image tag using jquery?
我如何使用jquery检查锚文本是否包含图片标签。 我在这里尝试的是 小提琴 。 例如： 是否可以检查条件，如果锚文本包含img src，然后执行某些操作。 任何建议都会很棒。 谢谢，vicky ...
如何添加文本以锚定图像？
[英]How to add text to anchor with image?
我有一个图像链接，我想变成图像和文本链接。 有这个： 我想得到这个（注意“ Cat”文本）： 我的代码添加了文本，但删除了图像： ...
如何知道锚点在文本或图像上？
[英]How to know that the anchor was on text or image?
我遇到了以下问题：获取锚文本并在重定向的屏幕上打印该文本： 如何在Session变量中获取锚文本？ 我从这个问题得到了解决方案，但是现在如果锚点在图像上，我如何传递一些文本以将其打印在重定向页面上？ 有人请查看链接中的上述问题，并请帮助我。 提前致谢 ...
如何在 HTML 中向上移动图像？
[英]How can I move an image upwards in HTML?
我试图让图像向上移动。 问题是我添加的代码不起作用。 img src="arrow_inv.png" { animation-duration: 2.4s; animation-name: arrow; } @keyframes arrow { ...
如何在点击时替换锚标记中的文本子字符串？
[英]How can I replace a substring of text within an anchor tag on click?
我有一个标签： 我想做这样的事情： 因此，当节目出现时，节目将被隐藏，而反之亦然。 显然以上都行不通。 我试过.includes，：contains .innerHTML.indexOf等似乎没什么用。 JSFiddle在这里 任何人都可以澄清我应该如何正确处理这 ...
如何在锚文本后添加跨度？
[英]How can I add a span after the text in an anchor?
我想将 class=caret 添加到 CMS 中的引导模板到所有带有 class="has-submenu" 的锚点，如图所示 我尝试了几种解决方案，例如 哪个不起作用。 < b> class="caret" < /b>可能也足够了，代码可以是javascript ...
如何创建一个空的HTML锚点，以便在单击它时页面不会“跳起来”？
[英]How can I create an empty HTML anchor so the page doesn't “jump up” when I click it?
当我点击一个链接时，我正在研究一些JQuery来隐藏/显示一些内容。 我可以创建类似的东西： 但是，如果我在页面上向下滚动时单击该链接，它将跳回到页面顶部。 如果我这样做： 页面将重新加载，这将清除javascript所做的所有更改的页面。 像这样的东西： ...
单击锚标记时，如何保存该元素 ID 以便以后使用？
[英]When clicking on an anchor tag, how to save that elements ID so I can use it later?
我的网站上有一堆这样的列表： 每个都有从我的数据库加载的唯一数据和 ID。 当我单击其中一个下摆时，它会打开一个包含有关它的信息的面板。 我不想显示所有信息，只显示部分。 在另一个面板上，我有一个按钮： 我想最初加载一些数据，这很容易使用 onclick=function()。 但是如何存储 ...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.