1

これは、この質問をクリックしたときに最初に考えたよりも少し複雑に思えるかもしれません.

テキストを保持できる非常に単純な 2 列のレイアウトを作成しようとしています。問題は、テキストがコンテンツ管理システムを介してインポートされているため、これが変更される可能性があることです。アイデアは、すべてのスペースを使い果たしたときに別の列のコンテンツを引き継ぐことができるタグを持つことです。

<p>Content goes here ... for quite a while ... lorum ipsum would be better.</p>

|-------------|  |-------------|
| Content     |  | while ...   |
| goes here   |  | lorum ipsum |
| ... for     |  | would be    |
| quite a     |  | better.     |
|-------------|  |-------------|

したがって、本質的に1つである必要がある場合に2つの異なる列が含まれているため、フロートの左/右機能が除外されます。割るだけ。

PHP のstrlen関数を使用して文字数をカウントすることを考えましたが、ご存知のように、さまざまなフォントでは、実際の文字数がコンテンツの高さにまったく関係しないという意味iよりも小さくなります。wいいえ、固定幅フォントは使用できません。これが最後の手段になる気がしますが、簡単にあきらめるのは嫌いです。

提案やアイデアは大いに役立ちます。ありがとう！

4

2 に答える 2

5

あなたが説明していることは、column-countプロパティを通じて CSS3 に既に実装されています。

CSS :

p {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -o-column-count: 2;
    column-count: 2;
}

デモ: http://jsfiddle.net/WDgsv/

IE もサポートしたい場合は、JS ポリフィルを使用してください: http://www.csscripting.com/css-multi-column/

于 2012-09-19T22:10:29.660 に答える
0

別の解決策を探している人のために (そして、IE が絶対的な苦痛であるために私が使用した不幸な解決策)、私はこのきちんとしたコードを作成しました。

<? $array_content = explode("</p>", $page_content);
$i = 0;
foreach($array_content as $paragraph) {
  echo $paragraph;
  if($i == (round(count($array_content)/2, 0, PHP_ROUND_HALF_DOWN))-1) {
    echo "</div><div class=\"column\">";
  }
  $i++;
}?>

文章にも最適です。針をピリオドに変更するだけです: explode(".", $page_content);.

于 2012-09-21T22:41:16.887 に答える