CSS3列和UIWebView

使用CSS3列获取稍大的文本文档并使其水平滚动。 我希望每列都接近iPad屏幕的大小，因为我在UIWebView中显示内容。

如果我将-webkit-column-width：属性设置为相对较小的数字，那么一切都很好。 文本在包含的最大高度和水平列的列中停止。

但是，如果我使-webkit-column-width大于300px，那么这个css似乎完全被忽略了。 文本垂直显示，没有样式。 任何修复？

-webkit-column-width为325px时显示。 视图通常向右滚动：

-webkit-column-width为500px时显示。 文本显示为一列，视图向下滚动到文档的末尾，忽略最大高度：

Answer 1

你试图将600px宽的容器划分为X 500px宽的列。 浏览器只渲染一列，因为它不能在600px宽的容器中放置2个（或更多） 500px宽的列。 首先 – 默认情况下，浏览器将垂直拉伸您的内容，使其水平拉伸您必须指定容器的固定height ， width需要设置为auto （默认值）。 当然，您需要调整此值，以便列适合iPad视口。

这是代码的演示，应该可以正常工作 – http://jsfiddle.net/wojtiku/bFKpa/

 #container { height: 300px; -webkit-column-width: 150px; -webkit-column-gap: 20px; } 

注意：我没有在桌面上测试的iPad。