我正在生成应放在两列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>
出于一种不可理解的原因,我的列没有像这样正确地垂直对齐(平衡):
我看了这个主题Vertically Misaligned CSS Columns,并尝试根据答案修改我的代码,但它没有给我预期的结果:
两列中的列表已正确平衡,但其余文本未在两列中显示。
此答案应该与一个有序列表一起使用,而不与我的代码中的html标记的混合结构一起使用。
有人知道我的代码出了什么问题以及如何使我的列正确平衡吗?
*{
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>