Colonnes CSS3 et UIWebView

Question

Utilisez des colonnes CSS3 pour prendre un document texte assez volumineux et le faire défiler horizontalement. Je souhaite que chaque colonne soit proche de la taille de l'écran de l'iPad, car j'affiche le contenu dans un UIWebView.

Si la valeur de la propriété -webkit-column-width: est relativement petite, tout fonctionne parfaitement. Le texte s'arrête à l'ensemble max-height pour le conteneur et les colonnes à l'horizontale.

Si je crée -webkit-column-width quelque chose de plus gros qu'environ 300px, ce CSS semble être complètement ignoré. Le texte s'affiche verticalement comme il le ferait sans style. Des correctifs?

Affichage lorsque -webkit-column-width est 325px. La vue défile à droite normalement:

Affichage lorsque -webkit colonne de largeur est 500px. Le texte apparaît comme une colonne et les rouleaux de vue vers le bas à la fin du document, en ignorant max-height:

Answer 1

Vous essayez de diviser, disons, 600px large récipient en colonnes larges X 500px. Le navigateur ne rend qu'une seule colonne car il ne peut pas mettre 2 (ou plus) 500px colonnes larges dans le conteneur large 600px. Tout d'abord - par défaut, le navigateur va étirer votre contenu verticalement, pour l'étirer horizontalement, vous devez spécifier height fixe pour le conteneur et width doit être défini sur auto (qui est par défaut). Bien sûr, vous devez ajuster ces valeurs pour que les colonnes s'adaptent à la fenêtre de l'iPad.

Voici la démo de code, qui devrait fonctionner correctement - http://jsfiddle.net/wojtiku/bFKpa/

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

NOTE: Je n'ai pas iPad, testé sur le bureau.