css列宽怎么设置?

CSS3新增多列布局适合排版很长的文字内容,让其多列显示。可以使用column-width属性来设置列宽。下面本篇文章就来给大家介绍一下column-width属性,希望对大家有所帮助。

column-width属性指定列的宽度。【相关教程推荐:css视频教程

语法:

column-width: auto|length;
  • auto:浏览器将决定列的宽度

  • length:指定列宽的长度

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.newspaper{
				column-width: 100px;
				-moz-column-width: 100px;
				/* Firefox */
				-webkit-column-width: 100px;
				/* Safari and Chrome */
			}
		</style>
	</head>

	<body>
		<div class="newspaper">
			当我年轻的时候,我梦想改变这个世界;
			当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;
			当我进入暮年以后,我发现我不能够改变我们的国家,
			我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,
			我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;
			在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。
		</div>
	</body>

</html>

效果图:

更多CSS相关知识,可查阅 css参考手册

以上就是css列宽怎么设置?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读