2

現在、1 つの大きな行と 2 つの列だけの HTML テーブルにテキストを表示しています。私はテーブルを使用して、サイドバイサイドの側面を利用しています（誰かがそうすることの利点を教えてくれれば、フローティングdivに切り替えることができます）。左側にテキストを記入し、次に右側に記入します。上から下までのテキスト分布に関して、両側が均等に見えることが非常に重要です。

各サイドのコンテンツは (データベースから) 固定されており、ほとんどの場合、右側が不足しています。テキストの位置合わせが行に収まるように単語の間隔を空ける方法と同様に、テキストが上から下にあることを確認するために、右の列の行を垂直方向に位置合わせする方法はありますか?

私は狂ったように探していましたが、運がありませんでした。

これがどのように見えるかのスクリーンショットです。私は宗教的なテキストを正確に複製しようとしています (したがって、列のデータは修正されています。これは、実際の本の実際の状態です) が、それを微調整するのに苦労しています。奇妙なことに、問題がない場合もあれば、非常に悪い場合もあります。

ここに画像の説明を入力

4

2 に答える 2

4

UIWebViewそれをサポートしていると仮定すると（モバイル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 に答える