CSS多色右列大于左列

fdbelqdn  于 2022-12-30  发布在  其他
关注(0)|答案(1)|浏览(129)

我一直在尝试使用多栏,因为我想给予我的网站一个像书一样的感觉。我希望段落元素保持完整,所以我添加了break-inside:不幸的是,某些大小的段落会导致断点将段落移动到右列,这看起来很糟糕,因为现在右列比左列大。有人会假设在平衡列时,它总是会使左列更大?
我觉得有一种方法可以解决这个问题,那就是通过添加一个类来手动选择发生中断的段落,但我想知道是否有一个更通用的解决方案。
这里有一个例子可以说明我的意思:http://www.theworldwars.net/resources/resources.php?r=vdes_us
下面是它的外观示例:http://www.theworldwars.net/resources/resources.php?r=vdes_de
谢谢。

  1. .multicol {
  2. columns: 512px 2;
  3. column-gap: 5%;
  4. }
  5. p {
  6. break-inside: avoid;
  7. }
v1l68za4

v1l68za41#

这似乎对firefox有效:

  1. @media and (min-width: 1540px) {
  2. .multicol {
  3. columns: 2;
  4. column-gap: 5%;
  5. }
  6. p {
  7. break-inside: avoid;
  8. }
  9. }

相关问题