用于打印的 3 个文本 div 的最佳布局

Question

我正在写一本由大约 500 页组成的书，每页最多包含 3 个部分，“a”“b”和“c”。在每个页面中，每个部分的内容长度是不同的：例如在第1页中，可能有一个长的“a”，没有“b”，还有一个短的“c”；在第2页中，可能有中“a”、短“b”、长“c”等。

每个页面中每个部分的内容都以 HTML 格式给出。

我想对页面上的部分进行布局，以便有效地使用页面区域。这是我想防止的非高效布局的示例：

aaa bbb ccc
aaa     ccc
aaa     ccc
        ccc
        ccc

如您所见，有很多浪费的区域。

最初，我尝试根据内容长度来控制列宽，例如：

aaa b ccccc
aaa b ccccc
aaa b ccccc

这样效率更高，但是“b”列太窄且难以阅读。

我尝试的另一件事是保持宽度不变，但使用“浮动”布局。例如，假设我只有“a”和“b”列：

aaa bbb 
aaaaaa 

如果我只有两列，这可能很简单：

• 如果 a 比 b 长得多，则使 b 向右浮动；
• 如果 b 比 a 长得多，则向左浮动；
• 如果它们的长度大致相同，则使它们成为相邻的两列。

但是，当有 3 列时，这会变得更加复杂，因为有很多可能的组合。

这个问题有通用的解决方案吗？

Answer 1

您可能想看看 jQuery Masonry。可能不是您真正想要的，但我想它可能会有所帮助。