html - 在图像周围环绕定义列表文本 (CSS\HTML)

Question

尝试使用 CSS 将文本环绕在 HTML 中的图像周围时遇到问题。这里的上下文是关于小说系列的，每个 Angular 色都有他/她自己的术语/定义对，用于我放入

列表中的名称、职业等。此信息应环绕每个 Angular 色信息 block 右上角的单个图像。

列表有一个名为 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; }

同时，我的

列表的代码如下:

<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>

为了简洁起见，这显然是超浓缩的。您会注意到 元素位于

的正上方。我想要的是让这张图片漂浮在

中信息的右上角，并让信息像这样环绕图片:

到目前为止，我已经让图片成功地向右浮动，但文字并没有环绕它。它只是停在图像的左边界，即使它在垂直方向上没有图像，在右侧留下一个与图像宽度相同的间隙。

有没有人知道我做错了什么？我是否使用了错误的元素 ()？图像是否应该是定义列表中的一个元素，例如

Image

？是否有一个我缺少的 CSS 属性，或者我有一个我不应该拥有的属性？我尝试了一些方法，但结果喜忧参半/灾难性，并且尝试了一些我在网络上找到的解决方案，但没有一个能满足我的需要。

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

谢谢!

Answer 1

如果你设置

text-align: justify;

关于 <DL>标签(或 <DD> 标签)，使其符合图像。