Question

有没有机会在CSS中有一个具有不同高度的2列段落？我有一个固定高度，并希望从左到右填充它。

this is what I want与what I got

我使用column-count和column-fill玩弄了它，但它最终被废弃了。

Answer 1

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: