网页分栏排版问题探讨
看过杂志报纸的人，都知道文章往往会分栏排版，阅读起来更加容易；用过WORD的人都知道，WORD可以分栏排版；
现在的问题是，我们如何将分栏排版应用到WEB中，在WEB浏览器中，实现分栏排版的效果；使得新闻文章看起来更加有个性；
技术难题1：需要定制模版，这个模版限制那些区域显示文字，并且划分成多个区域，文章内容要在这些区域中连贯显示；
技术难题2：程序如何能够识别，往一个方框里面填充文章内容，什么时候会刚好合适而不将方框撑大，然后从这里开始截断，并开始显示下一个区域；
举例说明：
我有一个模版，分为左右2栏，中间又插播一些广告什么的，每个区域用一个固定长宽的DIV布局，板式如下；
【文字区域1】 【文字区域3】
【广告区域1】 【文字区域4】
【文字区域2】
现在的要求是，有一篇文章，分别按顺序显示在【文字区域1】到【文字区域4】，文字区域1显示不下了接着在文字区域2显示，依次类推；
征求设计意见和想法：）
--------------------编程问答-------------------- 注意不能简单地算字数，因为可能有英文和中文，标点符号什么的，还有换行。难以从字数上控制； --------------------编程问答-------------------- 1，先估算出每个DIV能放的大概的字符数
2，后台取出文章后，用JS判断下需要几个div，然后分隔到不同的DIV里
--------------------编程问答-------------------- up --------------------编程问答-------------------- 用一段区域截取看部分不好吗?
点击details查看就ok了 --------------------编程问答-------------------- ding
--------------------编程问答-------------------- 我一般是用一个大的DIV，然后自己手动在js里面拼小DIV，然后innerHTML进去 --------------------编程问答-------------------- 都太可行啊，因为每个区域的高度宽度都不固定；而一段话要自己换行，多了的部分截断，在下一个DIV继续显示，估计这个很难用JS实现吧；
大家有没有其他可行的办法，用后台程序实现也可以，直接在ASP.NET后台处理都行；
关键是算法问题！这里牵涉到很多，字体大小，行高都会决定出不同的结果！ --------------------编程问答-------------------- ding --------------------编程问答-------------------- 简单地说，我们如何实现对DIV的填充判断；
比如我有3个固定宽度和高低的DIV，我在一个TEXTAREA中不停地输入文字，用JS自动将文字插入到DIV中；
现在的要求是，当文字插入到DIV1中已经满了（比如一个DIV可能只显示3行），不能撑大DIV使得DIV有更多行，而是自动在另一个DIV中接着显示，这个如何实现； --------------------编程问答-------------------- 参考js分页 --------------------编程问答-------------------- 好像没有一个这样的判断.
而且你填充的DIV应该是不定的吧.
如果是定的还有办法. --------------------编程问答-------------------- 找到解决办法了；大家顶起来，人人有分！！！！！！！！
<!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 runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div id="div1" runat="server"
style="line-height:25px; border:1px green solid; white-space:normal;text-align:left;padding:0px 4px 5px 10px;margin-left:8px;margin-right:8px;float:left;width:187px; height:170px;overflow:hidden;">
</div>
<div id="div2" runat="server" style="line-height:25px; border:1px green solid; white-space:normal;text-align:left;padding:0px 4px 5px 10px;margin-left:8px;margin-right:8px;float:left;width:187px; height:170px;overflow:hidden;">
</div>
</form>
</body>
</html>
<script type="text/javascript">
var str = "纪念五四运动90周年大会4日上午在人民大会堂举行。胡锦涛、吴邦国、温家宝、贾庆林、李长春、习近平、李克强、贺国强、周永康等党和国家领导人出席大会。 "+
" 中共中央政治局常委李长春在大会上讲话。 "+
" 新华社报道，人民大会堂大礼堂鲜花竞艳，春意盎然。主席台台口上方是醒目的“纪念五四运动90周年大会”会标，后幕正中是“1919－2009”的红色大字，两侧分列10面鲜艳的红旗。二楼眺台悬挂着横幅：“紧密团结在以胡锦涛同志为总书记的党中央周围，高举中国特色社会主义伟大旗帜，团结动员广大青年继承和发扬五四运动光荣传统，为夺取全面建设小康社会新胜利、实现中华民族伟大复兴而奋斗！”大会开始前，与会各族各界青年代表高唱《光荣啊，中国共青团》、《歌唱祖国》、《没有共产党就没有新中国》等歌曲，会场内洋溢着澎湃的青春热情。 "
+" 上午10时，中共中央政治局委员、全国人大常委会副委员长王兆国宣布大会开始。全体起立，高唱国歌。 ";
var e1 = document.getElementById("div1");
var e2 = document.getElementById("div2");
var count = 100;//估计一个数量.
e1.innerHTML = str.substr(0,count);
while(e1.scrollHeight > e1.offsetHeight)
{
count --;
e1.innerHTML = str.substr(0,count);
}
e2.innerHTML = str.substr(count,str.length-count);
</script>
--------------------编程问答-------------------- 不可行。何不 一个div 显示全部的内容 或者显示一个内容的部分文字 。这样用多个div 显示多个内容。一样可以排版的
--------------------编程问答-------------------- 还是DIV+CSS+JS处理的比较好
顶~ --------------------编程问答-------------------- 呵呵。。学习，学习 --------------------编程问答-------------------- 楼主可以参考 js拖动层的效果去设计。 --------------------编程问答-------------------- 学习`关注`UP --------------------编程问答-------------------- 跟帖 --------------------编程问答-------------------- 用div+css就能实现的 --------------------编程问答-------------------- 呵呵 顶啊
--------------------编程问答-------------------- 字体大小也不定
根据一个字的高度和宽度,确定在显示区域内一行能显示的字数和所能显示的行数,然后作相应
的截断处理 --------------------编程问答-------------------- 因为字体大小不确定，单词长度不确定，不像中文
行间距不确定，这意味着不可能去计算能显示多少；
只能是借助IE的一些特性来解决，就是获取到DIV的scrollHeight 和offsetHeight高度来判断
这有一个问题，一是不太稳定
二是其他浏览器不支持，汗~~~~~其他浏览器的offsetHeight和scrollHeight 跟IE的意义不一样 --------------------编程问答-------------------- 要是ASP.NET的话……直接用flowdocument控件解决……无敌分栏……
补充：.NET技术 , ASP.NET
