CSS-多栏布局

CSS-多栏布局

   
   <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多栏目布局</title>
    <style>
        
        多栏目布局在旧版的html+css2当中要通过<table>或者<div>实现,现在变得简单了
        -webkit-column-count:栏目数
        -webkit-column-width:栏目宽度
        -webkit-column-gap:间隔px

        在火狐当中将-webkit改为moz即可,但是在iphone或者anroid等屏幕较窄的终端当中,两列显示不是很方便,因此几乎不使用多栏布局
        
    .box{
        width: 300px;
        padding: 10px;
        font-size: 20px;

        -webkit-column-count:2;
        -moz-column-count:2;

        -webkit-column-gap:10px;
        -moz-column-gap:10px;

        border: 1px solid red;
    }
    </style>
</head>
<body>
    <div class="box">
        HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本,现在仍处于发展阶段,但大部分浏览器已经支持某些 HTML5 技术。
    </div>
</body>
</html>

你可能感兴趣的:(CSS-多栏布局)