Question

我对此代码有疑问：

<style>
#tabimg{
}
#tabpara{
position:relative;
left:310px;
top:-310px;
}
</style>

<h1>CLICK ON THIS HEADING</h1>
<div id="hideme" height="400">
  <div id="tabimg">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" width="300" height="300">
  </div>
  <div id="tabpara" width="300" height="300" >
    <p>Paragraph Text</p>
  </div>
</div>




<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    $("#hideme").hide();
    $("h1").click(function(){
                $("#hideme").slideToggle(500);
    });
});
</script>

我在页面底部有一个滚动条，我不知道为什么？我是HTML + JavaScript的新手，如果它是一个简单的错误，请道歉谢谢:)）

Answer 1

您应该将宽度参数添加到css并删除direct width =“300”参数：

#tabpara
{
 position:relative;
 left:310px; 
 top:-310px;
 width:300px;
}

Answer 2

你得到滚动条的原因是这个CSS规则：

#tabpara {
    left: 310px;
}

如果您不使用left推送段落，该段落将非常适合。此外，像width="300"这样的内联样式是您不应该依赖的。使用CSS更改元素的宽度：

#tabpara {
    left: 310px;
    width: 300px;
    top: -310px;
}

HTML页面底部的滚动条

2 个答案: