javascript - 在 `` 中加载图像会覆盖 html 文本

Question

我正在编写一个应该具有以下行为的 html 页面:

1. 加载后它包含一个空的 <div>里面有一个链接。

1. 一旦按下链接就会运行脚本StartTrial.js它应该从目录加载图像，将其可视化，并给出一些操作说明。

但是，如您所见，加载图像后，它会覆盖说明。这是因为说明写在 <div> 中距容器 30 像素的边距 <div>在加载图像之前使用它的大小。如何修复我的代码，使文本始终显示为距离图像底部有 30 像素的边距？

这是我的代码片段:

HTML

<div id="container">
 <a href="javascript:StartTrial()" id="startTrial">Start Trial</a>
 <img class="displays" id="t1_img" src="./images/immi.jpg">
</div>

<div class="instruction" id="instr_1">
    <p><b>Instruction:</b><p> 
    <p>Some text here.</p>
</div>

CSS

#container {
    position: relative;
    background: gray;
    width: 300px;
    height: 300px;
    margin: 30px;
}

.displays {
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
}

JavaScript

function StartTrial() {

    $('#startTrial').hide();
    $('#t1_img').show();
    $('#instr_1').show();

}

Answer 1

更改您的 css 以使用最小高度和最小宽度

#container {
    position: relative;
    background: gray;
    min-width: 300px;
    min-height: 300px;
    margin: 30px;
}

并删除绝对定位，因为没有真正的需要。

.displays {
    display: none;
    top: 0px;
    left: 0px;
}

您的图片比容器大，因此与说明重叠。