CSS能将一段文字排成两列吗？

中国丫头 · 发表于 2010-8-25 02:02:54

就是有一段文字，一共20行吧，然后通过CSS来让它变成左右两边各10行，类似WORD那样。
可以是平均两边各10行，也可以是固定左边多少行，剩下的放右边。
CSS能做到吗？

中国丫头 · 发表于 2010-8-25 02:09:24

注意，每行不是一个li，这只是一个演示。
实际应用的时候，是一大段落文本~

yjlrwmqj · 发表于 2010-8-25 06:57:25

不是li 起码得有其他容器吧
要不css怎么控制啊
div这样的都可以实现啊

yoom · 发表于 2010-8-25 08:01:23

目前只能用CSS3来解决，因此IE8及其以下是不会生效的。

提示：您可以先修改部分代码再运行

丫头注意身体，凌晨了。

buddies · 发表于 2010-8-25 09:35:55

css是可以实现的，不过比楼上的要复杂一点

14px · 发表于 2010-8-25 10:51:17

li { float:left; width:49.5%;}

imbingyu · 发表于 2010-8-25 18:00:34

提示：您可以先修改部分代码再运行

hero777 · 发表于 2010-8-25 20:11:23

用float可以实现，但是无法判断行数问题，需要结合脚本语言来做。

radom · 发表于 2010-8-25 20:18:38

总要给个两个标签吧！

难不成PRE

中国丫头 · 发表于 2010-8-28 14:23:51

谢谢楼主各位，特别是4楼和7楼的代码。
4楼的不行了，环境要求太苛刻了。
7楼的没明白我的意思，是两段文字，不是一堆li，如果是li我知道怎么弄。

yoom · 发表于 2010-8-29 10:27:51

突然想到用JS来模拟一个：
P中尽量只写纯文本，这个模拟没有考虑太多特殊情况，只是基本功能实现了的：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>两栏</title>
<style>
#content{border:solid 1px #aaa;padding:1em;width:800px;margin:0 auto;}
	#article-column {position:relative;overflow:hidden;background:url(http://bbs.blueidea.com/customavatars/28440.gif) center center repeat-y;}
	#article-column p {margin:0;padding:0;font-size:14px;line-height:23px;}
</style>
</head>
<body>
<h1>用JS来模拟的，未考虑特殊情况哈，尽量只用纯文字</h1>
<div id="content">
	<div id="article-column">
		<p><b>Start</b>广义相对论是阿尔伯特·爱因斯坦于1916年发表的用几何语言描述的引力理论，它代表了现代物理学中引力理论研究的最高水平。广义相对论将经典的牛顿万有引力定律包含在狭义相对论的框架中，并在此基础上应用等效原理而建立。在广义相对论中，引力被描述为时空的一种几何属性（曲率）；而这种时空曲率与处于时空中的物质与辐射的能量-动量张量直接相联系，其联系方式即是爱因斯坦的引力场方程（一个二阶非线性偏微分方程组）。从广义相对论得到的有关预言和经典物理中的对应预言非常不相同，尤其是有关时间流逝、空间几何、自由落体的运动以及光的传播等问题，例如引力场内的时间膨胀、光的引力红移和引力时间延迟效应。广义相对论的预言至今为止已经通过了所有观测和实验的验证——虽说广义相对论并非当今描述引力的唯一理论，它却是能够与实验数据相符合的最简洁的理论。不过，仍然有一些问题至今未能解决，典型的即是如何将广义相对论和量子物理的定律统一起来，从而建立一个完备并且自洽的量子引力理论。爱因斯坦的广义相对论理论在天体物理学中有着非常重要的应用：它直接推导出某些大质量恒星会终结为一个黑洞——时空中的某些区域发生极度的扭曲以至于连光都无法逸出。<b>END</b> 
	</div>
</div>
</body>
</html>
<script src="http://a.tbcdn.cn/s/kissy/1.1.3/kissy-min.js?t=20100816.js"></script>
<script>
KISSY.ready(function(S){
	var D=S.DOM,E=S.Event,
		articleObj=S.get('#article-column'),
		container=S.get('p',articleObj),
		/*重要：因为妳说的10行，10*行高23px，即等于230px */
		lineHeight=parseInt(D.css(container,'line-height'),10)*10;
		/*隐藏剩下的部分*/
		D.css(articleObj,'height',lineHeight+'px');
		//重要：栏的宽度
		D.css(container,'width','370px');
		//复制一个节点
		var newContainer=container.cloneNode(true);
		D.css(newContainer,{'position':'absolute','right':'0','top':'-230px'});
		articleObj.appendChild(newContainer);
});
</script>

提示：您可以先修改部分代码再运行

当JS加载错误的时候，就按照普通的外观显示了。

[[i] 本帖最后由 yoom 于 2010-8-29 10:36 编辑 ]

帐号		自动登录	找回密码
密码			注册

[求助] CSS能将一段文字排成两列吗？

回复 10# 中国丫头 [楼主] 的帖子