垂直错位 CSS 列，具有混合文本结构

Question

我正在生成 html 应该放在两列中的代码 div:

 <!DOCTYPE html>
    <head>
    <meta charset="utf-8" />
    <style>
    .legendext{ column-count:2; column-gap:10pt; text-indent:0.0cm; margin-left:1.0cm; margin-right:1.0cm;}
    </style>
    <body>
    <figure>
    <div class="legendext">
    <dl>
    <dt><span>Definition 1</span></dt>
    <dd>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    <ul>
    <li>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    </li>
    <li>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    </li>
    <li>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    </li>
    </ul>
    </dd>
    <dt><span>Definition 2</span></dt>
    <dd>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    </dd>
    <dt><span>Definition 3</span></dt>
    <dd>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    </dd>
    </dl>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    </div>
    <figcaption>Figure : My figure.</figcaption>
    </figure>
    </head>

由于无法理解的原因，我的列没有像这样正确垂直对齐（平衡）：

我查看了这个主题并尝试根据答案修改我的代码，但它没有给我预期的结果：

两栏中的列表是正确平衡的，但我的其余文本没有显示在两栏中。

这个答案应该与单个有序列表一起使用，而不是像我的代码中那样与 html 标签的混合结构一起使用。

有谁知道我的代码有什么问题以及如何使我的列正确平衡？

Answer 1

*{
        margin: 0px;
    }
.legendext
{ 
    column-count:2; 
    column-gap:10pt; 
    text-indent:0.0cm; 
    margin: 5rem;
    }
    .legendext dd {
        margin: 2.5rem 0rem;
    }


    p {
        margin: .5rem 0rem;
    }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<figure>
<div class="legendext">
<dl>
<dt><span>Definition 1</span></dt>
<dd>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
<ul>
<li>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
</li>
<li>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
</li>
<li>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
</li>
</ul>
</dd>
<dt><span>Definition 2</span></dt>
<dd>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
</dd>
<dt><span>Definition 3</span></dt>
<dd>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
</dd>
</dl>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
</div>
<figcaption>Figure : My figure.</figcaption>
</figure>

</body>

</html>

垂直错位 CSS 列，具有混合文本结构

vertically misaligned CSS columns with mixed text structure

html

css

alignment

vertical-alignment

multiple-columns