1

前段时间，有一个关于 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>";
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（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>

希望能帮助到你！:-)

于 2012-11-09T08:21:25.857 回答