2012-01-09 14 views
1

複数の列を含むテキストを表示したいとします。それが新聞に表示されているのと同じ方法:新聞スタイルの複数列のテキスト(HTML)

enter image description here

私はdiv要素のテーブルでそれを行う方法を知っているが、その場合には、私はテキストが列の間に切断された場所を指定する必要があります。

私が実行して適切な溶液を見た:それはオペラと正常に動作しますが、最新のFirefoxやChromeで...

答えて

5

column-countはCSS3であるので、それはでは動作しません警告されていない <div style="column-count:2"> text </bla>

をいくつかの古いブラウザ。

あなたの質問に答えるために、あなたはCSSでより具体的にする必要がある場合があります

div{ 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
    column-count: 2; 
} 
+0

ありがとう、それは完璧に動作します。 – Oli

0

また、floatを使用することができます左フロート:古いブラウザのサポートのためにあなたのコラムを行う権利を。

テキストは各列にスタックされていますが、次のテキストには展開されませんが。

0

column-countがすべての主要なブラウザで機能するのは素晴らしいことですが、そうではありません。 PHPなどのプログラミング言語を使用してテキストを分割し、各divに挿入することをお勧めします。単純にはこのようになります

<?php 
$textLenght = strlen($text); 
$part1 = substr($text, 0, $textLenght/2); 
$part2 = substr($text, $textLenght/2); 
?> 

<div class="col1"><?php echo $part1 ?></div> 
<div class="col2"><?php echo $part2 ?></div> 

もちろん、より複雑なアルゴリズムを使用してテキストを分割する必要があります。

関連する問題