CSS3列和UIWebView

Question

使用CSS3列來獲取較大的文本文檔並使其水平滾動。我希望每列都接近iPad屏幕的大小，因爲我在UIWebView中顯示內容。

如果我使-webkit-column-width：屬性爲一個相對較小的數字，那麼一切都很好。文本停止在爲容器設置的最大高度和水平列出。

如果我使-webkit-column-width大於大約300px，儘管如此，這個CSS似乎完全被忽略。文本垂直顯示，因爲它沒有樣式。任何修復？

當-webkit-column-width爲325px時顯示。視圖滾動到正常的權利：

顯示當-webkit-列寬度爲500像素。文本顯示爲一列視圖向下滾動到文檔的末尾，忽略最大高度：

Answer 1

您正在試圖分裂，讓我們說，600px寬容器放入X 500px寬列。瀏覽器只渲染一列，因爲它不能在600px寬容器中放置2個（或更多）寬的列。首先 - 默認情況下，瀏覽器將垂直拉伸您的內容，以使其水平拉伸，您必須爲容器指定固定的height，並且需要將width設置爲auto（這是默認值）。當然，您需要調整此值，以便列將適合iPad視口。

這裏的代碼演示，這應該正常工作 - http://jsfiddle.net/wojtiku/bFKpa/

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

注：我沒有iPad的，在桌面上進行測試。