ios - CSS3 列和 UIWebView

Question

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

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

但是，如果我将 -webkit-column-width 设为大于 300px 的值，则此 css 似乎会被完全忽略。文本垂直显示，就像没有样式一样。有任何修复吗？

-webkit-column-width 为 325px 时显示。 View 正常向右滚动:

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

Answer 1

比方说，您正试图将 600px 宽的容器分成 X 个 500px 宽的列。浏览器只呈现一列，因为它不能在 600px 宽的容器中放置 2 个(或更多)500px 宽的列。首先 - 默认情况下，浏览器会垂直拉伸(stretch)您的内容，要使其水平拉伸(stretch)，您必须为容器指定固定的 height 并且需要设置 width为 auto(默认)。当然，您需要调整此值，以便列适合 iPad 的视口(viewport)。

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

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

注意:我没有 iPad，在台式机上测试过。