div的大小被忽略了

问题描述 投票:1回答:2

我有一个超级简单的网页,可以将服务器中的数据作为容器加载到s中。问题是有时图像太高,溢出并导致布局问题。所以,我希望使用以下方法调整div的大小:

target.style.height = height; // As short form of:
document.getElementById('someId').style.height=height;

但到目前为止,我尝试过没有尝试过。这是html文件:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body bgcolor="#E3FBFF" text="#000000" onload="loadImages();">
      <script type = "text/javascript">
        function loadImages()
        {
          ...Function omitted for brevity...
          But it gets to this line:
          document.getElementById(d0).style.height = height+10;
        }
  </script>
    <div id=d0></div>
    <hr>
    <div id=d1></div>
    <hr>
    <div id=d2></div>
    <hr>
    <div id=d3></div>
    <hr>
    </body>
    </html>

而已!

我找到了各种文章like this one,或this one,但是,他们没有帮助。

我发现在我的情况下,我不需要使用div本身。我只需要图像和相关文本不垂直(或水平)重叠。事实上,当图像加载时,它可能是一个真正的混乱。 ...我怎么能告诉我的div是全宽的,没有其他div的叠加?我尝试使用一个类,使用CSS等等,都被忽略了。

我想我是在不正确的假设下工作的,即作为面向块的东西,即使你声明全宽(“宽度= 100%”),也可以并且仍然会根据放置在其中的内容垂直重叠。

javascript html styles width
2个回答
2
投票

你没有显示你分配给'身高'的内容,但是从你的代码中我假设它是一个整数。

document.getElementById(d0).style.height = height+10;

style接受一个字符串(即10px),因此为其分配编号将不起作用,请尝试以下操作

document.getElementById(d0).style.height = height+10+'px';

javascript会将它转换为字符串 更多关于整数到字符串这里What's the best way to convert a number to a string in JavaScript?


2
投票

height变量中添加一个单位。在编辑元素的CSS样式时,这是必需的。见:MDN

document.getElementById('someId').style.height=height成为:document.getElementById('someId').style.height = height.toString() + 'px'

© www.soinside.com 2019 - 2024. All rights reserved.