CSS3-Spalten und UIWebView

Question

Verwenden Sie CSS3-Spalten, um ein etwas großes Textdokument aufzunehmen und horizontal zu scrollen. Ich möchte, dass jede Spalte der Größe des iPad-Bildschirms entspricht, da ich den Inhalt in einem UIWebView anzeigen kann.

Wenn ich die -webkit-column-width: -Eigenschaft eine relativ kleine Zahl, alles funktioniert gut. Der Text stoppt bei der maximalen Höhe, die horizontal und horizontal festgelegt ist.

Wenn ich -webkit-column-width etwas größer als etwa 300px mache, scheint diese CSS vollständig ignoriert zu werden. Der Text wird vertikal angezeigt, wie es ohne Styling wäre. Irgendwelche Korrekturen?

Anzeige, wenn -webkit-column-width 325px ist. Die Ansicht nach rechts gescrollt normalerweise:

Anzeige bei -webkit-column-Breite 500px ist. Text erscheint als eine Spalte und die Ansicht scrollt nach unten zum Ende des Dokuments, ohne auf max-height:

Answer 1

Sie versuchen, zu teilen, sagen wir mal, 600px breite Behälter in X 500px breite Spalten. Der Browser rendert nur eine Spalte, weil 2 (oder mehr) 500px breite Spalten nicht in 600px breite Container gesetzt werden können. Zunächst einmal - standardmäßig streckt der Browser Ihren Inhalt vertikal, um ihn horizontal zu dehnen, müssen Sie height für den Container festsetzen und width muss auf auto gesetzt werden (das ist der Standardwert). Natürlich müssen Sie diese Werte anpassen, damit die Spalten in das iPads-Ansichtsfenster passen.

Hier Demo-Code ist, das sollte richtig funktionieren - http://jsfiddle.net/wojtiku/bFKpa/

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

HINWEIS: Ich habe kein iPad haben, auf dem Desktop getestet.