列宽度 | column-width

column-widthCSS属性指定最小列宽。列的数量将是可容纳的最大列数，而没有任何列的宽度小于该column-width值。实际的列宽可能小于column-width容器宽度较小的值。

/* Keyword value */
column-width: auto;

/* Different <length> values */
column-width: 6px;
column-width: 25em;
column-width: 0.3vw;

/* Global values */
column-width: inherit;
column-width: initial;
column-width: unset;

这使您可以实现适合不同屏幕尺寸的可扩展设计。特别是在column-count具有优先级的CSS属性的情况下，要设置确切的列宽度，必须指定所有长度值。在水平文本这些width，column-width，column-gap，和column-rule-width。

语法

值

<length>是<length>给出列的最佳宽度的提示的值。实际的列宽可能会更宽（填充可用空间），或者更窄（仅当可用空间小于指定的列宽时）。长度必须严格肯定，否则声明无效。

auto是一个关键字，指示列的宽度应由其他CSS属性确定，如column-count。

形式语法

<length> | auto

实例

HTML内容

<div class="content-box">
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.
</div>

CSS内容

.content-box {
  border: 10px solid #0ff;

  /* Chrome, Safari, Opera prefix */
  -webkit-column-width: 100px;

  /* Mozilla Firefox prefix */
  -moz-column-width: 100px;

  column-width: 100px;
}

规范

浏览器兼容性