CSS3 столбцы и UIWebView

Question

Использование CSS3-столбцов для получения довольно большого текстового документа и его горизонтальной прокрутки. Я хочу, чтобы каждый столбец был близок к размеру экрана iPad, так как я отображаю содержимое в UIWebView.

Если я сделаю свойство -webkit-column-width: относительно небольшим числом, все будет отлично работать. Текст останавливается на максимальной высоте, установленной для содержимого и столбцов горизонтально.

Если я сделаю -webkit-column-width чем-то большим, чем примерно 300px, то, похоже, этот css полностью игнорируется. Текст отображается вертикально, как без стилизации. Какие-нибудь исправления?

Отображается, когда -webkit-column-width равно 325px. Вид обычно прокручивается вправо:

Отображается, когда -webkit-column-width равно 500px. Текст отображается в виде одного столбца, а представление прокручивается вниз до конца документа, игнорируя max-height:

Answer 1

Вы пытаетесь разделить, скажем, контейнер шириной 600px на столбцы шириной X 500px.Браузер отображает только один столбец, поскольку он не может поместить 2 (или более) столбца шириной 500px в контейнер шириной 600px.Прежде всего - по умолчанию браузер будет растягивать ваш контент по вертикали, чтобы заставить его растягивать его по горизонтали, вы должны указать фиксированный height для контейнера, а width должен быть установлен в auto (по умолчанию).Конечно, вам нужно настроить эти значения так, чтобы столбцы соответствовали области просмотра iPads.

Вот демонстрационный пример кода, который должен работать правильно - http://jsfiddle.net/wojtiku/bFKpa/

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

ПРИМЕЧАНИЕ: Iу меня нет iPad, протестировано на рабочем столе.