Javascript 关于浏览器独立多列文本段落的问题。（IE8 IE9中的工程）
不久前，有一个关于CSS3多列在IE9或任何其他IE中不受支持的问题。这就产生了以下简单而实用的答案。我想在这一点上稍加改进，因为它有一个缺陷，那就是底线是不合理的。你能看到底部文本行的对齐也缺少了什么吗？事实上，最酷的事情是在任何一行上都有不到半句话，后跟一个点，而不是证明那行是对的，这样做才有意义。让下一段更清晰可见。你觉得怎么样？或者您有更好的想法来改进这个浏览器独立的多列脚本Javascript 关于浏览器独立多列文本段落的问题。（IE8 IE9中的工程）,javascript,text,css,multiple-columns,Javascript,Text,Css,Multiple Columns,不久前，有一个关于CSS3多列在IE9或任何其他IE中不受支持的问题。这就产生了以下简单而实用的答案。我想在这一点上稍加改进，因为它有一个缺陷，那就是底线是不合理的。你能看到底部文本行的对齐也缺少了什么吗？事实上，最酷的事情是在任何一行上都有不到半句话，后跟一个点，而不是证明那行是对的，这样做才有意义。让下一段更清晰可见。你觉得怎么样？或者您有更好的想法来改进这个浏览器独立的多列脚本 我看到的大多数实现都使用div+p，请检查treesaver.js： 如果您查看css3 multiple co
我看到的大多数实现都使用div+p，请检查treesaver.js：
如果您查看css3 multiple column的规范，就会知道columned layout有更多属性。我看到的大多数实现都使用div+p，请查看treesaver.js： 如果您查看css3 multiple column的规范，就会知道columned layout有更多属性。这是我的多浏览器完全工作的解决方案 首先下载这个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>
<!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>
希望有帮助！：- 如果你能让它正常工作，将它集成到HTC行为解决方案中（如CSS3Pie）将是一件非常棒的事情。@Spudley你这是什么意思？什么是HTC/CSS3pie？抱歉，如果我的问题听起来很愚蠢，那么我必须在其他领域更聪明：CSS3Pie是IE6/7/8的黑客，它允许它使用许多CSS3功能，例如边界半径和渐变，这在IE中通常是不可能的。它使用一个称为“行为”的IE特定功能，允许您从CSS触发Javascript事件。它由一个包含Javascript代码的.htc文件处理。有许多其他IE黑客使用相同的技术，但CSS3Pie可能是最好的例子。在CSS3专栏中了解更多信息是作为Css3Pie在其论坛上的功能建议而提出的。如果您能让这项功能发挥作用，将其集成到HTC行为解决方案（如Css3Pie）中将是非常棒的。@Spudley您这是什么意思？什么是HTC/CSS3pie？抱歉，如果我的问题听起来很愚蠢，那么我必须在其他领域更聪明：CSS3Pie是IE6/7/8的黑客，它允许它使用许多CSS3功能，例如边界半径和渐变，这在IE中通常是不可能的。它使用一个称为“行为”的IE特定功能，允许您从CSS触发Javascript事件。它由一个包含Javascript代码的.htc文件处理。有许多其他IE黑客使用相同的技术，但CSS3Pie可能是最好的例子。“在CSS3上了解更多”专栏已作为Css3Pie论坛的一项功能建议提出。