Fmpq教程在线工具 - Fmpq教程实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Fmpq教程(fmpq.com)</title> 
</head> 
<body>

<p>点击“尝试一下”按钮设置 DIV 元素的 column-count 属性为 "3"：</p>
<button onclick="myFunction()">尝试一下</button>
<div id="myDIV">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
	sed diam nonummy nibh euismod tincidunt ut laoreet dolore
	magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
	quis nostrud exerci tation ullamcorper suscipit lobortis 
	nisl ut aliquip ex ea commodo consequat. Duis autem vel 
	eum iriure dolor in hendrerit in vulputate velit esse 
	molestie consequat, vel illum dolore eu feugiat nulla
	facilisis at vero eros et accumsan et iusto odio dignissim
	qui blandit praesent luptatum zzril delenit augue duis 
	dolore te feugait nulla facilisi. Nam liber tempor cum 
	soluta nobis eleifend option congue nihil imperdiet 
	doming id quod mazim placerat facer possim assum. Typi 
	non habent claritatem insitam; est usus legentis in iis 
	qui facit eorum claritatem. Investigationes demonstraverunt 
	lectores legere me lius quod ii legunt saepius.
</div>
<script>
function myFunction(){
	document.getElementById("myDIV").style.columnCount = "3";
	document.getElementById("myDIV").style.WebkitColumnCount = "3"; /* 针对 Chrome 和 Safari 的代码 */
	document.getElementById("myDIV").style.MozColumnCount = "3"; /* 针对 Firefox 的代码 */
}
</script>

</body>
</html>