Question

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

加载时，它包含一个空的<div>，里面有一个链接。

enter image description here

一旦按下该链接，就会运行脚本StartTrial.js，该脚本应该从目录中加载图像，将其可视化，并提供有关如何操作的说明。

enter image description here

但是，正如您所看到的，一旦加载图像，它将涵盖说明。这是因为指令是在<div>中写入的，在加载图像之前，它的容量<div>与容器<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>的边距为30px。如何修复我的代码，以便文本始终以图像底部的30px边距显示？

以下是我的代码段：

HTML

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

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

CSS

function StartTrial() {

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

}

的JavaScript

{{1}}

Answer 1

将您的CSS更改为使用min-height和min-width

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

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

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

您的图像比容器大，因此它与指令重叠。

Answer 2

无需过度设计，您可以使用css解决方案或简单的JS解决方案，如下所示：

仅CSS解决方案

<强> HTML：

<input type="checkbox" id="startCheckbox" class="start-checkbox"/>
<div id="container" class="container">
     <label for="startCheckbox" class="start-trial center">Start Trial</label>
    <div class="instruction center" id="instr_1">
         <p><b>Instruction:</b></p> 
         <p>Some text here.</p>
    </div>
</div>

<强> CSS：

.center {
    position: absolute;
    top:0; right:0; bottom:0; left:0;
    margin: auto;    
}

.container {
    border: 1px solid #ccc;
    width: 400px;
    height: 400px;
    position: relative;
}

.container .instruction {
    border: 1px dashed #333;
    background: rgba(255,238,221,.9);
    width: 250px;
    height: 250px;
    padding: 25px;
    text-align: center;
    display: none;
}


.container .start-trial {
    position: absolute;
    height: 20px;
    width: 80px;
    text-decoration: underline;
    cursor: pointer;
}

.container .start-checkbox {
  display: none;
}

.start-checkbox {  
  display: none;
}
.start-checkbox:checked ~ .container .start-trial {
    display: none;
}

.start-checkbox:checked ~ .container .instruction {
    display: block;
}

.start-checkbox:checked ~ .container {
    background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}

小提琴：http://jsfiddle.net/qobbkh6f/5/

CSS + JS解决方案

<强> HTML：

<div id="container" class="container">
   <a href="#" id="startTrial" class="start-trial center">Start Trial</a>
   <div class="instruction center" id="instr_1">
     <p><b>Instruction:</b></p> 
     <p>Some text here.</p>
   </div>
</div>

<强> CSS：

.center {
  position: absolute;
  top:0; right:0; bottom:0; left:0;
  margin: auto;    
}

.container {
  border: 1px solid #ccc;
  width: 400px;
  height: 400px;
  position: relative;
}

.container .instruction {
  border: 1px dashed #333;
  background: rgba(255,238,221,.9);
  width: 250px;
  height: 250px;
  padding: 25px;
  text-align: center;
  display: none;
}

.container.clicked {
  background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}

.container.clicked .start-trial {
  display: none;
}

.container.clicked .instruction {
  display: block;
}

.copntainer.clicked .instruction {
  display: block;
}


.container .start-trial {
  position: absolute;
  height: 20px;
  width: 80px;
}

<强> JS：

$("#container").on("click", "#startTrial", function(e) {
  e.preventDefault();
  $("#container").addClass("clicked");
});

小提琴：http://jsfiddle.net/qobbkh6f/3/

Answer 3

试试这个并告诉我它是否有帮助 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: grey;
    width: 300px;
    height: 300px;
    margin: 30px;
    overflow:hidden
}

.displays {
    position: absolute;
    top: 0px;
    left: 0px;
    max-height:100%;
}

的Javascript

function StartTrial() {

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

}

http://jsfiddle.net/5jx3dn44/

Answer 4

请勿在图像上使用绝对定位。

绝对定位的整个概念是使元素与页面上的其他元素重叠。如果您不希望某些内容与其他元素重叠，请不要使用它。

也不要给容器增加尺寸。它不是300x300和灰色的容器 - 它是你的开始试用块。如果容器是不可见且灵活的，那么当您移除开始试用块时，其中的图像看起来会很好。我忘了hide（）是如何工作的，但只是改为display：none，如果它实际上没有从布局中删除元素。

在`<div>`中加载图像会覆盖html文本</div>

4 个答案: