具有混合文本结构的垂直未对齐CSS列

问题描述 投票：0回答：1

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

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

出于一种不可理解的原因，我的列没有像这样正确地垂直对齐（平衡）：

enter image description here

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

enter image description here

两列中的列表已正确平衡，但其余文本未在两列中显示。

此答案应该与一个有序列表一起使用，而不与我的代码中的html标记的混合结构一起使用。

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

html css alignment multiple-columns vertical-alignment
1个回答
0
投票
*{
        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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.