zoukankan      html  css  js  c++  java
  • CSS3 column 分栏

     column的布局形式还没有使用过,后续的bug和解决方案有待检验。

    column
    column-count:number; 设置内容分为多少栏显示
    column-width:长度单位;设置每一栏的宽度而不设定元素的宽度
    column-gap:长度单位;设置多栏之间的间隔距离
    column-rule:宽度,颜色;在栏与栏之间增加一条间隔线。类似border.
    column-span:all/none;设置是否跨栏显示

    demo1 文章分栏

     

    .txt{1000px;text-indent:2em;padding:0;margin:0; } 
    .txt2{-webkit-column-count:3; -webkit-column-gap:20px; -webkit-column-rule:2px dotted #ccc;}
    

      

    demo2 不再需要浮动布局

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>CSS3 mask</title>
    	<style>
    	*{margin:0;padding: 0;overflow: hidden;}
    	.box{ 100px;height: 100px;background-color: red;display: block;}
    	.txt{1000px;}
    	.txt .box{margin:10px;}
    	.txt2{-webkit-column-count:4;}
    	.txt2 .box{margin:0;}
    	
    	</style>
    </head>
    <body>
     <h2>没有分栏</h2>
     <div class="txt">
      	<div class="box"></div>
    	<div class="box"></div>
    	<div class="box"></div>
    	<div class="box"></div>
    </div>
    
    <h2>设置分栏后</h2>
     <div class="txt txt2">
      	<div class="box"></div>
    	<div class="box"></div>
    	<div class="box"></div>
    	<div class="box"></div>
    </div>
    
    </body>
    </html>
    

      

  • 相关阅读:
    去掉Win10中的“此电脑”中的6个默认文件夹的方法
    Fastboot驱动及安装
    Fastboot驱动及安装
    JNI+NDK编程总结
    JNI+NDK编程总结
    20194742自动生成四则运算题第一版报告
    读构建之法现代软件工程随笔
    想法或创意
    ubuntu控制台乱码
    Java 为什么不支持多继承?
  • 原文地址:https://www.cnblogs.com/dtdxrk/p/4530157.html
Copyright © 2011-2022 走看看