關於瀏覽器獨立多列文本段落花的問題。（適用於IE8 IE9）

Question

一段時間之前，有一個問題是關於IE9或與此相關的其他IE不支持CSS3多列的問題。 這產生了以下快速簡單且實用的答案。 我想對此進行改進，因為它存在底線不合理的缺陷。 您是否也能看到使底部文本行合理化所缺少的內容？ 實際上，最酷的事情是使給定行上的句子少於半個句子時，要使之有意義，然后再加上一個點，而不是證明該行是合理的。 這樣下一段更加清晰可見。 你對那個怎么想的？ 還是您有更好的想法來改進此獨立於瀏覽器的多列腳本？

實時測試結果網址

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>";

Answer 1

我看到的大多數實現都是使用div + p，請檢查treesaver.js：

http://treesaverjs.com/

並且，如果您檢查css3多列的規格，您將知道列式布局還有更多屬性。

Answer 2

這是我的多瀏覽器完全可用的解決方案。

首先下載此js庫： http: //randysimons.nl/overige/multicolumn/multicolumn.js（Randy Simons編寫的MultiColumn text 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>

希望能幫助到你！ :-)

關於瀏覽器獨立多列文本段落花的問題。（適用於IE8 IE9）

問題描述

2 個解決方案

解決方案1
3 已采納 2011-02-21 17:48:30

解決方案2
2 2012-11-09 08:21:25

關於瀏覽器獨立多列文本段落花的問題。 （適用於IE8 IE9）

問題描述

2 個解決方案

解決方案1 3 已采納 2011-02-21 17:48:30

解決方案2 2 2012-11-09 08:21:25

關於瀏覽器獨立多列文本段落花的問題。（適用於IE8 IE9）

解決方案1
3 已采納 2011-02-21 17:48:30

解決方案2
2 2012-11-09 08:21:25