• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • column-width

    版本:CSS3

    column-widthCSS属性建议一个最佳列宽。列宽是在添加另一列之前列将成为最大宽度。

    示例

    /* 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-width: auto;
    
    /* different <length> values */
    column-width: 6px;
    column-width: 25em;
    column-width: 0.3vw;
    
    column-width: inherit;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE10以上版本的浏览器都支持column-width

    语法

    column-width:auto| <length>

    取值:

    • auto:列的宽度由其他CSS属性决定,例如column_count
    • <length>:指示最佳列宽。实际列宽可能与指定的值不同:当需要填充可用空间时,列宽可能会更宽;当可用空间太小时,列宽可能会变窄。值必须严格为正,否则声明无效。百分比值也无效。
    默认值auto
    适用于块级元素,除去table
    继承性
    动画性当是一个长度时
    计算值绝对长度,零或更大

    例子

    <style>
    .content-box {
    	width:20%;
    	padding:20px;
    	border: 10px solid #000000;
    	column-width:100px;
    	-moz-column-width:100px;/*firefox*/
    	-webkit-column-width:100px;/*safari and chrome*/
    }
    .content-box .items
    {
    	border:1px solid #ff6633;
    	padding:10px;
    }
    </style>
    
    <h3>效果:</h3>
    <div class="content-box">
    	<p class="items">第一列文字部分:内容内容内容内容内容内容</p>
    	<p class="items">第二列文字部分:内容内容内容内容内容内容</p>
    	<p class="items">第三列文字部分:内容内容内容内容内容内容</p>
    	<p class="items">第四列文字部分:内容内容内容内容内容内容</p>
    	<p class="items">第五列文字部分:内容内容内容内容内容内容</p>
    </div>
    

    效果:

    第一列文字部分:内容内容内容内容内容内容

    第二列文字部分:内容内容内容内容内容内容

    第三列文字部分:内容内容内容内容内容内容

    第四列文字部分:内容内容内容内容内容内容

    第五列文字部分:内容内容内容内容内容内容

    上篇:columns

    下篇:column-count