4

問題:

テキストの大きな部分があります:

<div class="cont">
    <p>
        Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
        totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, 
        explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur 
        magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia 
        dolor sit, amet,
    </p> 
    <p>
        consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam 
        aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit 
        laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea 
        voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas 
        nulla pariatur? At vero eos et 
    </p>
    <p>
        accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque 
        corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt 
        in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis 
        est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, 
        quo minus id, quod maxime placeat, 
    </p>
    <p>
        facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam 
        et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et 
        molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
         maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </p>
    <p>
        Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
        totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta 
        sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia 
        consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui 
        dolorem ipsum, quia dolor sit, amet,
    </p> 
    <p>
        consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore 
        magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis 
        suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, 
        qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, 
        quo voluptas nulla pariatur? At vero eos et 
    </p>
    <p>
        accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque 
        corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique 
        sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem 
        rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi 
        optio, cumque nihil impedit, quo minus id, quod maxime placeat, 
    </p>
    <p>
        facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam 
        et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et 
        molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis 
        voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </p>
</div>

2 つの列に分割する必要があります。ページ上では、ほぼ同じ (高さ) の 2 つの列に分割する必要があります。

代替テキスト

可能であれば、テキストのコンテナーのサイズを変更するとき、列は同じ高さのままにする必要があります。おそらく数値「n」を設定するかどうか-テキストの大きな部分を分割する列の数。つまり、テキストを任意の数の列に分割します。

PHP、XSLT、CSS、純粋な JavaScript (jQuery なし) はありますか? どのツールを使用するのが良いですか? それが行うように、決定はクロスブラウザ互換でした.

4

3 に答える 3

4

特定のバージョンの IE で動作しないことを気にしない場合は、新しい CSS3 マルチカラムを使用できます。これは簡単に実装できます。以下を参照してください。

http://www.css3.info/preview/multi-column-layout/

于 2010-03-29T09:52:28.717 に答える
0

これは、一部のJavascriptで可能です。私は次のアルゴリズムを呼び出しますColumns_Fit

  1. まず、高さが最小の列と高さが最大の列を見つけます。
  2. 手順1で見つけた最大の列の最初の段落から単語を削除し、手順1で見つけた最小の列にその単語を追加します。
  3. 2つの列の高さを比較します。
  4. それでも異なる場合は、手順2を繰り返します。

それがアルゴリズムの原理です。たとえば、「真ん中に行く」アプローチによって、すべての列に対してこれを繰り返す必要があります。

<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
<div id="col4"></div>

上記の列は、最小の列(col1)から最高の列()の順になっていcol4ます。col1およびで開始し、それらのアルゴリズムcol4で実行します。Columns_Fit後で、Columns_Fit次の2つの列でアルゴリズムを実行します:col2col3。これが、私がこのアプローチを「真ん中へ行く」と呼ぶ理由です。

すべての列の高さが正確に同じであるとは限らないことに注意してください。高さに偏差があるはずです。偏差は、線の高さと同じか、線の高さよりも大きくなります。(偏差> =行の高さ)

興味深い参考資料: DanielM.Frommeltによるクロスカラムプルアウト@alistapart.com

于 2010-03-29T10:04:18.937 に答える
0

そんな参考書を見つけました。

その決定は私に合っています。 http://www.csscripting.com/css-multi-column/ .

ここから取得: http://www.alistapart.com/articles/css3multicolumn/ .

マイナス: js ファイルが十分に重い。

もう 1 つの決定 (onResize でも機能します): http://randysimons.nl/125,english/129,multi-column-text/#paragraaf_1

于 2010-03-29T11:27:57.550 に答える