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

Question

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

应该这样做，只有一个段落内容自动推入新列，当它的高度大于max-height父容器。

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

谢谢， Jakub

Answer 1

可以使用列数来完成：

  

-webkit-column-count：3; / * Chrome，Safari，Opera * /

     

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

     

列数：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>

    public class MainActivity extends FragmentActivity {
          @Override
          public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main_layout);
            final View startView = findViewById(R.id.startTab);
            final View editView = findViewById(R.id.editTab);
            getSupportFragmentManager().beginTransaction()
                    .replace(startView.getId(),
                            new StartFragment()).commit();
            getSupportFragmentManager().beginTransaction()
                    .replace(editView.getId(),
                            new PagerFragment()).commit();
            editView.setVisibility(View.GONE);
}
}

来源：W3Schools

Answer 2

你试过这个吗？

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

这是纯CSS3，不需要Javascript。希望它有所帮助。

来源：w3Schools

Answer 3

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