javascript - 将图像定位在包含的html文件上

我试图将图像固定在某些包含内容的右上角。

<div class="panel-body helpContent">
   <img src="/images/myImage.png" class="beta" />
   <jsp:include page='<%="includes/" + thisFile +".html"%>' flush="true" />
</div>

图片只是角落里的一个小徽章，大约150像素x 150像素。

beta类如下所示：

.beta{
   position:absolute;
   top:0px;
   right:15px;}

问题在于图像位于某些HTML文件中内容的顶部。请注意，并非所有人。但是那些顶部标题很长的标题。

我想要的是将html内容包装起来，使其不会碰到它。如果我将图像包含在每个HTML文件中，则可以这样做，但如果可能的话，我只希望将其包含一次。

是否有一种创造性的解决方案，不需要每个页面上的图像？

感谢您提供任何有用的提示。

最佳答案

你试过浮动吗？

<div class="panel-body helpContent">
    <img src="/images/myImage.png" class="beta" />
    <jsp:include page='<%="includes/" + thisFile +".html"%>' flush="true" />
    <div class="clear"> </div>
</div>

.beta {
  float:right;
}

.clear {
  clear: both;
}