内容在超过最大高度时对齐

I'm struggling with this issue - i'm not sure how to achieve this type of alignment of content.

我正在努力解决这个问题 - 我不确定如何实现这种类型的内容对齐。

It should be done in the way, that with just one paragraph content is automatically pushed onto the new column when the height of it is bigger than max-height of the parent container.

它应该以这样的方式完成,当它的高度大于父容器的最大高度时,只有一个段落内容被自动推送到新列。

I was trying to achieve it with flexbox, but unfortunately i wasn't able to find a good solution. Could it be done with the pure CSS? Or do i need Javascript for that?

我试图用flexbox实现它,但不幸的是我无法找到一个好的解决方案。可以用纯CSS完成吗?或者我需要Javascript吗?

Thanks, Jakub

3 个解决方案

#1

Have you tried this, yet?

你试过这个吗?

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

It's pure CSS3, no Javascript needed. Hope it helps.

它是纯CSS3,不需要Javascript。希望能帮助到你。

Source: w3Schools

#2

It can be done with column count:

它可以通过列数来完成:

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-webkit-column-count:3; / * Chrome,Safari,Opera * /

-moz-column-count: 3; /* Firefox */

-moz-column-count:3; / * Firefox * /

column-count: 3;

.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>

<div class="newspaper">
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.
</div>

Source: W3Schools

#3

are you working on a framework like bootstrap? if not the blue part must have the full width of the screen so it will push all the 3 paragraphs to a new row in witch they will be aligned and under the blue title. if it doesn't work please comment your html.

你在开发像bootstrap这样的框架吗?如果不是蓝色部分必须具有屏幕的整个宽度,那么它将把所有3个段落推到一个新的行中,它们将被对齐并且在蓝色标题下。如果它不起作用请评论你的HTML。

#1