2

我目前正在一个 HTML 表格中显示文本，该表格只是一大行和两列。我正在使用表格来利用并排方面的优势（如果有人能告诉我这样做的优势，我可以切换到浮动 div）。我在左侧填充文本，然后在右侧填充。非常关键的是，双方看起来甚至从上到下的文本分布。

每一面的内容是固定的（来自数据库），而右侧的内容大部分时间都很短。与文本对齐如何将单词隔开以适合一行类似，有什么方法可以垂直对齐右列中的行以确保顶部底部有文本？

我一直在疯狂地寻找，但没有任何运气。

这是它的外观截图。我试图准确地复制一个宗教文本（因此列数据是固定的，这实际上是它在实际书中的样子），但我很难对其进行微调。奇怪的是，有时没有问题，但有时却很糟糕：

在此处输入图像描述

4

2 回答 2

4

假设UIWebView支持它（Mobile Safari 自 iOS 3.2 起就有），您可以使用-webkit-columnCSS 属性。

这些将 HTML 元素的内容流到您指定的尽可能多的列中，并在每列中放置尽可能多的文本。它们还允许您指定规则（如边框）​​和列之间的间隙，这将适合您的设计。

这意味着您不必再自己拆分内容了。

HTML

<div class="text"><p>I am currently displaying text in an HTML table that is simply one large row and two columns...</div>

<div class="references">If "Side by Side" is your main criterion for choosing a table with just two columns...</div>

CSS

.text {
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    -webkit-column-rule: solid 1px #999;
}

.references {
    padding: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-rule: solid 1px #999;
    border-top: solid 1px #999;
}
于 2012-02-08T08:13:12.347 回答
0

如果您问这个问题是因为您想将它用于 iBook，那么请使用Mac App Store 中的 iBook Author，它是免费的。

或者，您可以设计一个包含 3 列的表格，您可以添加前 2 列colspan=2。这将使顶部的 2 列，然后其余的将作为 3 列落在适当的位置。

于 2012-02-08T08:03:16.863 回答