css 多列样式

旧城等待， 2021-07-24 15:13 473阅读 0赞

多列
    
    	分列
    		column-count=n数字 分几列
    		
    	列间距
    		column-gap=npx 列间距
    		
    	间距样式
    		column-rule=solid/dashed  2px red   列分割的样式

代码示例:

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<style type="text/css">
    			.div01{ 
    				width: 500px;
    				height: 300px;
    				border: 1px solid red;
    				overflow: hidden;
    				column-count: 3;
    				column-gap:30px;
    				column-rule:dashed 2px;
    			}
    		</style>
    		
    	</head>
    	<body>
    		<div class="div01">
    			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    			啊           啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    					啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    			啊           啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    					啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    			啊           啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    					啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    			啊           啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    					啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    			啊           啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    			
    		</div>
    	</body>
    </html>