xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

CSS3 多列布局 All In One

CSS3 多列布局 All In One

CSS Multi-column Layout Module

W3C Candidate Recommendation 12 April 2011

https://www.w3.org/TR/css3-multicol/

https://github.com/w3c/html/issues/587

CSS3 多列属性

下表列出了所有 CSS3 的多列属性：

属性描述
column-count 指定元素应该被分割的列数。
column-fill 指定如何填充列
column-gap 指定列与列之间的间隙
column-rule 所有 column-rule-* 属性的简写
column-rule-color 指定两列间边框的颜色
column-rule-style 指定两列间边框的样式
column-rule-width 指定两列间边框的厚度
column-span 指定元素要跨越多少列
column-width 指定列的宽度
columns 设置 column-width 和 column-count 的简写

 

 

1

1

demo：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3-Multi-column</title>
    <style>
        img{
            width: 100px;
            height: 100px;
        }
        .table{
            margin: 5px;
            border: 5px solid green;
        }
        .table tr{
            margin: 5px;
            border: 3px solid blue;
        }
        .table td{
            margin: 5px;
            border: 1px dashed red;
            width: 100px;
            height: 100px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="div-multi-columns">
        <!-- <img src="../../images/icon.png" alt="icon.png" title="icon.png"> -->
    </div>
    <table cellspacing="3" cellpadding="2" contenteditable="" contextmenu="" class="table">
        <thead>
            <tr>
                <td>thead-td</td>
                <td>thead-td</td>
                <td>thead-td</td>
            </tr>
        </thead>
        <tbody>
            <caption>caption</caption>
            <tr>
                <td>
                    <img src="../../images/icon.png" alt="icon.png" title="icon.png">
                </td>
                <td>
                    ppppppppppppppppppppppppppppppppp<br>
                    ppppppppppppppppppppppppppppppppp<br>
                    ppppppppppppppppppppppppppppppppp<br>
                </td>
                <td>
                    ppppppppppppppppppppppppppppppppp<br>
                    ppppppppppppppppppppppppppppppppp<br>
                    ppppppppppppppppppppppppppppppppp<br>
                </td>
            </tr>
            <tr>
                <td>
                    ?? Are you ready? Special announcement: Write code for a real autonomous vehicle & learn from top industry partners!<br>
                </td>
                <td>
                    ?? Are you ready? Special announcement: Write code for a real autonomous vehicle & learn from top industry partners!<br>
                </td>
                <td>
                    ?? Are you ready? Special announcement: Write code for a real autonomous vehicle & learn from top industry partners!<br>
                </td>
            </tr>
        </tbody>
    </table>
    <!--  -->
</body>
</html>

 

refs

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

posted @   xgqfrms  阅读(24)  评论(2)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛