1、多列布局案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1、多列布局案例</title>
<style>
.outer{
width: 1000px;
margin: 0 auto;
/* 直接指定列数 */
column-count: 5;
/* 指定每一列的宽度来计算 */
/* column-width: 250px; */
/* 调整列间距 */
/* column-gap: 50px; */
/* 每一列边框的风格虚线 */
column-rule-style: dashed;
/* 每一列的边框颜色*/
column-rule-color: red;
/* 边框相关复合属性 */
column-rule:1 ;
}
h1{
column-span: all;
text-align: center;
font-size: 50px;
}
</style>
</head>
<body>
<div class="outer">
<h1>《震惊！坤哥来学前端了！》</h1>
<p>...</p>
</div>
</body>
</html>
评论 (0)