CSS多列问题：一个段落高度不等答案

【问题标题】：CSS Multi-Column issue: one paragraph with unequal heightsCSS多列问题：一个段落高度不等
【发布时间】：2015-03-04 10:29:57
【问题描述】：

是否有机会在 CSS 中拥有一个具有不同高度的 2 列段落？我有一个固定高度，想从左到右填充它。

this is what I want 与 what I got

我玩过column-count 和column-fill，但它最终被扔进了垃圾箱。

【问题讨论】：

标签： html css paragraph multiple-columns

【解决方案1】：

column-count=2 只会将整个文本集分成高度相等的两半，因此这就是您得到该结果的原因。

您可以通过为父 div 中的两列创建单独的 div 来实现所需的结果。

没有列数的替代解决方案：

.main {
   width:100%;
}
.main > div{
   width: 48%;
   display: inline-block;
   vertical-align: top;
   text-align: justify;
}
.main > div:nth-child(1){
   margin-right: 2%;
}

<!DOCTYPE html>
<html>
<head></head>
<body>
  <div class="main">

    <div>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam;</p>
  </div>
  <div>
    <p> est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
  </div>
</div>
</body></html>

【讨论】：

不幸的是 parapragh 文本来自 MySQL，所以长度不同