CSS3列和UIWebView [英] CSS3 Columns and UIWebView

问题描述

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

Using CSS3 columns to take a somewhat large text document and make it scroll horizontally. I want each column to be close to the size of the iPad screen, as I am displaying the content in a UIWebView.

如果我使-webkit-column-width ：属性相对较小，一切工作伟大。文本停止在包含的最大高度设置和水平列。

If I make the -webkit-column-width: property a relatively small number, everything works great. The text stops at the max-height set for the containing and columns out horizontally.

如果我使-webkit-column-width大于约300px，那么这个css似乎完全被忽略。文本将垂直显示，不带样式。任何修复？

If I make -webkit-column-width anything larger than about 300px, though, this css seems to get completely ignored. The text displays vertically as it would without styling. Any fixes?

当-webkit-column-width为325px时显示。视图正常滚动到右侧：

Display when -webkit-column-width is 325px. The view scrolls to the right normally:

-webkit-column-width为500px时显示。文本显示为一列，视图向下滚动到文档的结尾，忽略max-height：

Display when -webkit-column-width is 500px. Text appears as one column and the view scrolls downward to the end of the document, ignoring max-height:

推荐答案

您正试图分割，假设 600px wide container into X 500px wide columns。浏览器只呈现一个列，因为它不能在 600px 宽容器中放置2个（或更多个） 500px 首先 - 默认情况下，浏览器将垂直拉伸你的内容，以使它水平伸展你必须为容器和指定固定 height width 需要设置为 auto （这是默认值）。当然，您需要调整此值，以便列适合iPad视口。

You are trying to divide, let's say, 600px wide container into X 500px wide columns. Browser renders only one column because it can't put 2 (or more) 500px wide columns in 600px wide container. First of all - by default, the browser will stretch your content vertically, to make it stretch it horizontally you have to specify fixed height for the container and width needs to be set to auto (which is default). Of course you need to adjust this values so columns will fit iPads viewport.

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

Here is demo of code, that should work properly - http://jsfiddle.net/wojtiku/bFKpa/

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

注意：我没有iPad，

这篇关于CSS3列和UIWebView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！