css多列布局column

下面由我用一个小案例来讲解一下 多列布局—column

column-count: 3; ----设置列数(此处列数为3列)

column-rule: dashed 3px red; -----添加列间隙样式(与边框样式添加一样，此处宽度为3px的红色虚线)

column-gap: 50px;----设置列间隙大小(此处列宽为50px)

column-span: all;----设置跨列显示(此处为跨所有列显示)

column-width: 300px;----设置列宽(此处列宽为300px)

设置列宽的原则:取大优先

1.如果认为设置宽度更大,则取更大的值,但是会填充整个屏幕,意味最终的宽度可能也会大于设置的宽度-----填充满整个屏幕

2.如果人为设置宽度更小,使用默认计算的宽度

首先下面是html

<div class="wrapper">
	<h4>标题</h4>
	<p>
	几你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美
	<p>
</div>
           

下面是css样式

* {
    margin: 0;
    padding: 0;
}
div {
    width: 100%;
    padding: 20px;
    /*因为有内边距,要宽度100%,则需要设置box-sizing:border-box*/
     box-sizing: border-box;
    /*设置多列布局*/
    /*1.设置列数*/
    column-count: 3;
    /*2.添加列间隙样式,与边框样式的添加一样*/
    column-rule: dashed 3px red; /*宽度为3px的红色虚线*/
    /*3.设置列间隙大小*/
    column-gap: 50px;
    /*4.设置列宽
    原则:取大优先
    1.如果人为设置宽度更大,则取更大的值,但是会填充整个屏幕,意味最终的宽度可能也会大于设置的宽度---填充满整个屏幕
    2.如果人为设置宽度更小,使用默认计算的宽度*/
    column-width: 300px;
}
h4 {
    /*设置跨列显示  1 / all*/
    /* column-span: 1;  跨一列显示*/
    column-span: all;/*跨所有列显示*/
}