首页 > 开发 > CSS > 正文

基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享

2024-07-11 08:34:14
字体:
来源:转载
供稿:网友

CSS 多栏(Multi-column) : http://www.w3chtml.com/css3/properties/multi-column/

Properties
属性
CSS Version
版本
Inherit From Parent
继承性
Description
简介
columnsCSS3CSS3 columns 属性,是复合属性,设置或检索对象的列数和每列的宽度。
column-widthCSS3CSS3 column-width 属性,设置或检索对象每列的宽度
column-countCSS3CSS3 column-count 属性,设置或检索对象的列数
column-gapCSS3CSS3 column-gap 属性,设置或检索对象的列与列之间的间隙
column-ruleCSS3CSS3 column-rule 属性,是复合属性。设置或检索对象的列与列之间的边框。
column-rule-widthCSS3CSS3 column-rule-width 属性,设置或检索对象的列与列之间的边框厚度。
column-rule-styleCSS3CSS3 column-rule-style 属性,设置或检索对象的列与列之间的边框样式。
column-rule-colorCSS3CSS3 column-rule-color 属性,设置或检索对象的列与列之间的边框颜色。
column-spanCSS3CSS3 column-span 属性,设置或检索对象元素是否横跨所有列。
column-fillCSS3CSS3 column-fill 属性,设置或检索对象所有列的高度是否统一。
column-break-beforeCSS3CSS3 column-break-before 属性,设置或检索对象之前是否断行。
column-break-afterCSS3CSS3 column-break-after 属性,设置或检索对象之后是否断行。
column-break-insideCSS3CSS3 column-break-inside 属性,设置或检索对象内部是否断行。

先来写一个简单的图片页面

复制代码代码如下:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”css/main.css”>
<script type=”text/javascript” src=”../lib/jquery/jquery-1.11.1.min.js”></script>
</head>
<body>
<div id=”main”>
<div class=”box”>
<div class=”pic”>
<img src=””>
</div>
</div>
<div class=”box”>
<div class=”pic”>
<img src=””>
</div>
</div>
<!– 这里省略多个class为box的div–>
<div class=”box”>
<div class=”pic”>
<img src=””>

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表