css3的多列布局
2021-04-11 09:26
标签：颜色 整数 class 定义 col style pre bsp css3 columns属性 columns属性是一个简写属性 column-count属性:定义列的数量 column-width属性:定义列的宽度 column-count属性用于设置列的数量或者允许的最大列数 auto:默认值，用于表示列的数量由其他css属性决定 number:必须是正整数，用于表示定义列的数量 column-width 属性用于设置列的宽度或者列的最小宽度 auto:默认值，用于表示列的宽度由其他css属性决定 length:必须是正整数，用于表示定义列的宽度 列的间距 column-gap 属性用于设置列于列之间的间距，该属性需要为多列显示时的元素设置 normal:用于表示使用浏览器定义列的默认间距，默认值是1em length:必须是正整数，用于表示定义列之间的间距 列的边框 column-rule属性用于定义列于列之间的边框，其中包括边框宽度，边框颜色以及边框样式 column-rule-width column-rule-color column-rule-style 横跨多列 column-span属性用于定义一个列元素是否跨列 none:表示元素不跨列 all:表示元素跨所有列 列的填充 column-fill属性用于定义列的高度是由内容决定，还是统一高度 auto:默认值，用于表示列的高度由内容决定 balance:用于表示列的高度根据内容最多的一列高度为准 css3的多列布局 标签：颜色 整数 class 定义 col style pre bsp css3 原文地址：https://www.cnblogs.com/qjb2404/p/12416634.htmldiv class="parent">
div class="col1">div>
div class="col2">div>
div class="col3">div>
div class="col4">div>
div>
.parent,.parent2{
/*column-count: 4;
column-width: 300px;*/
columns: 4 300px; /*简写*/
column-gap:20px;
column-rule:5px red double; /*设置间隙的边框*/
column-span:all;
}
.col1,.col2,.col3,.col4,.col5{
height:300px;
}
.col1{
background:red;
}
.col2{
background:#ccc;
}
.col3{
background:orange;
}
.col4{
background:yellow;
}
.col{
background:blue;
}
上一篇：JSP中文乱码问题