图像在jediorpane中对齐html

Question

我现在正在使用jEditorPane，我需要在图片的右上角对齐文字，尽管有一个html标记，用于align =＆＃34; left＆＃34;在我的图像中，我仍然在照片的右下角收到文字。我知道jEditorPane只支持高达3.2的HTML，但我检查并确保自HTML 1.0以来一直使用对齐标记

期望的输出：

当前输出：

这里有一个代码片段以获取更多信息，其中output是已添加到框架中的已定义的jEditorPane（设置为使用html）：

output.setText("<img src=\"https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png\" alt=\"profile picture\" width=\"60\" height=\"60\" align=\"left\"/>\r\n\r\n<font face=\"tahoma\" size=\"3\">\r\n\r\n<b>username</b>\r\n\r\n<font face=\"tahoma\" size=\"2.5\">\r\n<br>\r\n    \"blah blah blah\" \r\n<br>\r\n    \"blah blah blah\" \r\n<br>\r\n    \"blah blah blah\" \r\n</p>\r\n</br>\r\n<hr>");

html格式的文字：

＆＃13;

＆＃13;

<img src= "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt= "profile picture" width= "60" height= "60" align= "left"/>

<font face= "tahoma" size= "3">
  
  <b>username</b>
  
  <font face="tahoma" size="2.5">
    <br>
    "blah blah blah" 
    <br>
    "blah blah blah" 
    <br>
    "blah blah blah" 
    </p>
  </br>
<hr>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果我是正确的话，在文本上设置vertical-align: text-top;应该有效。

编辑;或者在JS object.style.verticalAlign="top"

中

Answer 2

我不完全确定jEditorPane是如何工作的，但如果它只是输出HTML，你不应该关心jEditorPane支持什么，但是浏览器支持什么。根据我的评论，并假设您可以（并且应该？）使用HTML5，但必须使用内联样式，我就这样做。

＆＃13;

＆＃13;

<div>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="profile picture" width="60" height="60">
<span style="font-weight:bold;margin-left:12px">username</span>
</div>

<div style="margin-top:12px">
    <!-- Instead of small you could also use font-size -->
    <small>
        blah blah blah<br>blah blah blah
    </small>
</div>

＆＃13;

＆＃13;

＆＃13;

在Java中，然后使用单引号作为包装，并在HTML字符串中使用双引号：

output.setText('<div><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="profile picture" width="60" height="60"><span style="font-weight:bold;margin-left:12px">username</span></div><div style="margin-top:12px"><small>blah blah blah<br>blah blah blah</small></div>');