MultiColumn文本

时间:2013-04-02 13:53:14

标签: html css

有没有办法指定文本必须是多列,列宽是以百分比定义的?

类似的东西:

<div style="width:20%; max-height:100px;" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante.
</div>

如果文本溢出div绑定,则显示新列。

3 个答案:

答案 0 :(得分:1)

目前使用原生HTML不支持此功能。目前必须使用JavaScript来获取此功能。

请参阅:http://www.htmlgoodies.com/html5/tutorials/how-to-create-multi-columns-in-css3-and-javascript.html#fbid=uRKNCpHfmWY

答案 1 :(得分:1)

这是一个JavaScript解决方案:

我在大学的最后一个学期做了一个iPad WebApp,这应该是一个报纸应用程序。为了让报纸像行一样,我们使用了这个jQuery插件:

http://archive.plugins.jquery.com/project/Columnizer

或:http://welcome.totheinter.net/columnizer-jquery-plugin/

您可以指定列的宽度,列的数量,并且具有一些可能对您有用的功能。 (但我们实际上并不需要它们......)

答案 2 :(得分:1)

如果您不必支持旧浏览器,我可能会建议您查看CSS3的多列功能:

http://www.w3.org/TR/css3-multicol/