在图像周围包裹定义列表文本（CSS \ HTML）

Question

尝试使用CSS在HTML中围绕图像包装文本时遇到问题。这里的上下文是一个小说系列，每个角色都有他/她自己的术语/定义对，如名称，职业等，我适合于＆lt; dl＆gt;名单。此信息应围绕每个角色的信息块右上角的单个图像。 ＆lt; dl＆gt; list有一个名为categories的类，其中包含以下CSS代码：

dl.categories { overflow: hidden; padding: 0 5px 0 5px; }
dl.categories dt { float: left; font-weight: bold; color: #AAA; width: 200px; }
dl.categories dd { float: left; width: calc(100% - 200px); margin: 0; padding-bottom: 15px; }
dl.categories dt:after { content: " :: "; }

有问题的图片/跨度有以下CSS：

.floatright { float: right; clear: left; }
.featureimage { width: 200px; margin-right: 5px; border-radius: 15px; border: 2px solid black; }

与此同时，我为我的＆lt; dl＆gt;所拥有的代码清单如下：

<div class="bulletin post" id ="character1">
    <img src="images/characters/aaron.jpg" class="floatright featureimage" alt="" />
    <dl class="categories">
        <dt>Name</dt>
            <dd>Aaron</dd>
    </dl>
</div>

为了简洁起见，这显然是超浓缩的。你会注意到＆lt; img＆gt;位于＆lt; dl＆gt;正上方的元素。我想要的是这个图像浮动在＆lt; dl＆gt;中的信息的右上角，并且信息包围图像：

到目前为止，我已将图像成功浮动到右侧，但文本没有环绕它。它只是停在图像的左边缘，即使它垂直清晰，右边的间隙与图像的宽度相同。

有没有人知道我做错了什么？我使用了错误的元素（＆lt; span＆gt;）吗？图像应该是定义列表中的元素，例如＆lt; dt style =“display：none;”＆gt; Image＆lt; / dt＆gt;＆lt; dd＆gt;＆lt; img /＆gt;＆lt; / dd＆gt;？我缺少一个CSS属性，或者我有一个我不应该的属性？我尝试过一些事情，但结果好坏参半，并尝试了一些我在网上找到的解决方案，但没有一个能给我提供我需要的东西。

出现的页面是http://www.inagalaxyfarfarawry.com/characters.php。

谢谢！

Answer 1

如果您设置

text-align: justify;

在<DL>标签（或<DD>标签）上，使其与图像一致。