HTML报纸专栏

Question

我正在尝试使用一个文本块创建报纸样式列.我希望文本在2列中均匀分布,这可能会对文本中长度的变化做出反应.

这可能只使用HTML/CSS,如果不能使用javascript吗？

谢谢

Answer 1

两个笔记:

• 对于印刷介质起作用的东西对于显示介质是不利的.不得不向上滚动以继续阅读对我来说似乎不是一个好主意.毕竟,网页的长度不受限制......
• 你不能用CSS2做到这一点.我认为CSS3支持(不确定),我怀疑大多数浏览器都支持它.

所以我认为JS是你最好的选择,但它当然不适用于有残疾人JS的用户.

Answer 2

如果您决定这样做,Mozilla和WebKit(以及Prince)只能使用CSS:

selector {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

Answer 3

它在CSS3规范中,Moz/Webkit已经通过供应商前缀实现了它.使用column-count和column-gap属性:

#container {
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  column-count: 2;
  column-gap: 20px;
}

请注意,当然,任何人使用的IE版本都不支持这些版本.CanIUse.com 声称IE 10将支持它作为CSS3的一部分.

Answer 4

CSS3 将允许您通过其多列支持来做到这一点，但目前，您可能无法依赖很多浏览器来支持它，因此您可能需要依赖替代方法。