1

しばらく前に、CSS3 の複数列が IE9 やその他の IE でサポートされていないという質問がありました。これにより、次の簡単で非常に機能的な回答が得られました。収益が正当化されないという欠点があるので、それを磨いて改善したいと思います。一番下のテキスト行も正当化することで何が欠けているかがわかりますか? 実際、最もクールなことは、任意の行に半分未満のセンテンスがあり、その後にドットが続く場合に意味をなすことであり、その行を正当化することではありません。次の段落がより見やすくなるように。それについてどう思いますか？または、このブラウザーに依存しない複数列のスクリプトを改善するためのより良いアイデアをお持ちですか?

ライブ テスト結果の URL

var text=document.getElementById('text').innerHTML;
var words=text.split(" ");
var wordc=words.length;
var length=words.join("").length;
var cols= new Array("","","");
var colc= new Array(0,0,0);
var col=0;

for(var i=0; i<wordc; i++){
    cols[col]+=words[i]+" ";
    if( (colc[col]+=words[i].length)>length/3)col++;
}
document.getElementById('text').innerHTML="<p>"+cols[0]+"</p><p>"+cols[1]+"</p><p>"+cols[2]+"</p>";
4

2 に答える 2

3

私が目にする実装のほとんどは、div + p を使用しています。treesaver.js を確認してください。

http://treesaverjs.com/

また、css3 の複数カラムの仕様を確認すると、カラムレイアウト用のプロパティが他にもあることがわかります。

于 2011-02-21T17:48:30.430 に答える
2

これが私のマルチブラウザの完全に機能するソリューションです。

最初にこのjsライブラリをダウンロードします：http： //randysimons.nl/overige/multicolumn/multicolumn.js（RandySimonsによるMultiColumntext reflower v1.4）

次に、次の例のようにコードを使用します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>MultiColumn example</title>
        <style type="text/css">
            /*Initial definitions for base column.
               Define the (minimum) width here, and optionally a padding */
            .columnized div {
                float: left;
                padding: 10px;          /* You may use a padding... but thanks to IE you can only use pixels! */
                position: relative;     /* Needed when using a 'read-on'-text */
                text-align: justify;
                text-align-last: justify;
                margin: 0;              /* Don't use a margin! */
                /*width: 0000px;        /* When using a fixed number of columns, you can omit the width. Otherwise it must be set! This will be the *minimum* width of a column*/
            }
            .columnized div P {
                text-align: justify;
                text-align-last: justify;
            }
            .columnized div P:after {
                content: "";
                display: inline-block;
                width: 100%;
            }
        </style>
        <script type="text/javascript" src="MultiColumn.js"></script>
        <script type="text/javascript">
            //Minimalistic settings. You can tweak the settings by re-assigning the defaults in MultiColumnSettings.
            multiColumnSettings=new MultiColumnSettings;
            multiColumnSettings.classNameScreen='columnized';
            multiColumnSettings.numberOfColumns=3;
            window.onload = function () {
                new MultiColumn(document.getElementById("main1"),multiColumnSettings);
            }
        </script>
    </head>
    <body>
        <div id="main1" style="width:550px;font-family:arial">
            <div>
                <P> <!-- P is required! -->
                I managed to do something like this but again, not in CSS, I used PHP to count words and split the text. Unfortunately counting words is a pretty bad way of going about doing it, since some words are longer than others and the columns don't match up. My design was inspired by the IHT website. It's not very hard to implement in PHP. I managed to do something like this but again, not in CSS, I used PHP to count words and split the text. Unfortunately counting words is a pretty bad way of going about doing it, since some words are longer than others and the columns don't match up. My design was inspired by the IHT website. It's not very hard to implement in PHP. I managed to do something like this but again, not in CSS, I used PHP to count words and split the text. Unfortunately counting words is a pretty bad way of going about doing it, since some words are longer than others and the columns don't match up. My design was inspired by the IHT website. It's not very hard to implement in PHP. My design was inspired by the IHT website. It's not very hard to implement in PHP. I managed to do something like this but again, not in CSS, I used PHP to count words and split the text. Unfortunately counting words is a pretty bad way of going about doing it, since some words are longer than others and the columns don't match up. My design was inspired by the IHT website. I used PHP to count words and split the text. Unfortunately counting words is a pretty bad way of going about doing it, since some words are longer than others and the columns don't match up. My design was inspired by the IHT website. It's not very hard to implement in PHP. My design was inspired by the IHT website. It's not very hard to implement in PHP. I managed to do something like this but again, not in CSS, I used PHP to count words and split the text. Unfortunately counting words is a pretty bad way of going about doing it, since some words are longer than others and the columns don't match up. My design was inspired by the IHT website.
                <BR>
            </div>
        </div>
    </body>
</html>

それが役に立てば幸い！:-)

于 2012-11-09T08:21:25.857 に答える