javascript - CSSまたはJavaScriptによる自動2列

Question

私は現在ウェブサイトを開発していますが、クライアントはさまざまな記事のテキストを2つの列にオーバーフローさせたいと考えています。新聞のようなものですか？したがって、次のようになります。

Today in Wales, someone actually      Nobody was harmed in
did something interesting.            the incident, although one 
Authorities are baffled by this       elderly victim is receiving
development and have arrested the     counselling.
perpetrator.

[書くものを考え出すのに本当に悪い試み]

CSSだけでこれを行う方法はありますか？複数のdivを使用する必要はありません。私もJavaScriptを使用することに積極的ですが、それは本当に苦手なので、助けていただければ幸いです。JavaScriptがコンテンツdivにある<p>の数を数え、それに基づいてそれらの後半をフロートするように移動できるのではないかと考えていました。多分？アドバイスをいただければ幸いです：D

score 12 · Accepted Answer

幸いなことに、CSSのみのソリューションがあります。悪いニュースは、既存のブラウザではそれに対する主要なサポートがないということです。実装されている場合は、次のようになります。

div.multi {
  column-count: 3
  column-gap: 10px;
  column-rule: 1px solid black;      
}

今のところ、一酸化炭素で言及されているように、あなたの最善の策はおそらくサーバー側だと思います

score 5 · Accepted Answer

それが何であれ、私はおそらくあなたのバックエンドでそれを処理するでしょう。PHPの例は次のようになります。

$content = "Today in Wales, someone actually did something...";
// Find the literal halfway point, should be close to the textual halfway point
$pos = int(strlen($content) / 2);
// Find the end of the nearest word
while ($content[$pos] != " ") { $pos++; }
// Split into columns based on the word ending.
$column1 = substr($content, 0, $pos);
$column2 = substr($content, $pos+1);

JavaScriptでInnerHTMLを使用して同様のことを行うことはおそらく可能ですが、個人的には、xサイトで明示的に許可されるまでJavaScriptを無効にするNoScriptのようなプラグインを使用する人が増えているため、その状況全体を回避します。そしてCSSはうまく劣化するように設計されました。この場合、JavaScriptソリューションはひどく劣化します。

score 3 · Accepted Answer

これは、列を自動的に実行し、画面サイズに基づいて列の数を変更できるJQueryプラグインです。

私自身は使ったことがありませんが、チェックしてみてください。

score 1 · Accepted Answer

1

Mootoolsを使用している場合は、MooColumnsをチェックアウトできます。

于 2008-10-11T23:58:29.657 に答える

score 0 · Accepted Answer

これは、HTML / CSS / JSで実現するのが難しい理由があります（それは可能だと確信していますが）。

新聞は複数の列を使用して行幅を減らし、テキストを読みやすくします。1つの列を終了すると、次の列の先頭に目を向けるので、これは紙の上では問題ありません。

Webでは、スクロールを使用してテキストを画面の境界を超えて続行できるようにするため、列は必要ありません。

score 0 · Accepted Answer

まず、cssだけでそれができるとは思いませんが、間違っていることが証明されることを望んでいます。

第二に、段落を数えるだけではまったく役に立ちません。少なくともすべての高さが必要であり、それに基づいてテキストの高さの中央を計算する必要がありますが、ウィンドウのサイズ変更などを考慮する必要があります。かなりシンプルな既製のソリューションです。残念ながら、私はこの問題の完璧な解決策を見つけることに悲観的ですが、それは興味深いものです。

score 0 · Accepted Answer

これは、Mozilla のみの CSS 拡張でサポートされています: -moz-column-count. 参照: https://developer.mozilla.org/en/CSS3_Columns

javascript - CSSまたはJavaScriptによる自動2列

7 に答える 7

Related

Reference