有没有办法在HTML中垂直对齐文本？

Question

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

每一方的内容都是固定的（来自数据库），而且大多数时候右侧的内容都很短。类似于文本对齐如何将单词空格化以适合一行，有没有什么方法可以垂直对齐右列中的行以确保顶部顶部有文本？

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

以下是它的外观截图。我试图完全复制一个宗教文本（因此列数据是固定的，实际上它是如何在实际的书中），但我只是很难对其进行微调。奇怪的是，有时候没有问题，但有时则非常糟糕：

Answer 1

假设UIWebView支持Mobile Safari has since iOS 3.2），您可以使用-webkit-column CSS属性。

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

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

• http://jsfiddle.net/bexD4/2/

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;
}

Answer 2

如果您因为要将其用于iBook而提出此问题，请使用iBook Author in the Mac App Store，它是免费的。

或者，您可以设计一个包含3列的表格，前2个可以添加 colspan=2 。这将是前2列，其余的将作为3列落在原位。