CSS - column-width 属性

CSS 属性 column-width 负责在多列布局中设置列的宽度。这使得容器具有尽可能多的列，这些列可以容纳在空间中，并且每列都保持指定的列宽值。如果容器的宽度小于指定的列宽值，则列的宽度将小于给定的值。

column-width 属性用于创建适合所有不同屏幕尺寸的响应式布局。column-count 属性始终优先于 column-width 属性。

可能的值

CSS 属性 column-width 采用以下值之一：

auto：由其他 CSS 属性 column-count 确定的列的宽度。
<length>：仅限正整数值。负值或百分比值无效。指定列的宽度。实际的列宽可能会有所不同，因为它会填充可用空间。

适用于

除表包装盒外的所有块容器。

语法


column-width = auto | <integer>

CSS column-width - <长度>（像素）

在以下示例中，<p> 元素的内容根据列宽值（以像素为单位）拆分为几列：


<html>
<head>
<style>	
	 	.col-count-width {
	 	 	 column-width: 250px;
	 	}
</style>
</head>
<body>
	 	<h1>column - 	Property</h1>

	 	<div>
	 	 	 <p class="col-count-width">
	 	 	 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.
	 	</p>
	 	</div>
</body>
</html>

CSS 列宽 - <长度> （英寸）

在以下示例中，<p> 元素的内容根据列宽值（以英寸为单位）拆分为列：


<html>
<head>
<style>	
	 	.col-count-width {
	 	 	 column-width: 2in;
	 	}
</style>
</head>
<body>
	 	<h1>column-width Property</h1>

	 	<div>
	 	 	 <p class="col-count-width">
	 	 	 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.
	 	</p>
	 	</div>
</body>
</html>

打印本页