当前位置：首页 > news >正文

8.5 CSS3多列布局

news 2025/8/6 8:47:03

多列布局

CSS3之多列布局columns CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。

设置列宽

column-width： | auto 设置对象的宽度；使用像素表示。 auto：根据 <’ column-count '> 自定分配宽度

<style>.all{column-width: 300px;}  
</style>
<body><div class="all"><h3>第一段</h3><p>标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。正如您所了解的那样，文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。</p><h3>第一段</h3><p>xmlns 属性在 XHTML 中是必需的，但在 HTML 中不是。不过，即使 XHTML 文档中的 <html> 没有使用此属性，W3C 的验证器也不会报错。这是因为 "xmlns=http://www.w3.org/1999/xhtml" 是一个固定值，即使您没有包含它，此值也会被添加到 <html> 标签中。</p><h3>第一段</h3><p>注释：即使 html 元素是文档的根元素，它也不包含 doctype 元素。doctype 元素必须位于 html 元素之前。</p><h3>第一段</h3><p>这个例子是一个很简单的 HTML 文件，使用了尽量少的 HTML 标签。它向您演示了 body 元素中的内容是如何被浏览器显示的。</p></div>
</body>

设置列数

column-count： | auto 用来定义对象中的列数，使用数字 1-10表示。 auto：根据 <' column-width '> 自定分配宽度

.all{/* 设置列数 */column-count: 3;
}

同时设置列宽和列数

columns: <‘column-width’> || <‘column-count’> 设置对象的列数和每列的宽度。复合属性。宽度和列数的合成；

.all{/* 设置列宽为100px,分3列，但是还是以列数为标准 */columns:100px 3;
}

列和列之间的间距

column-gap: normal || length， normal是默认值，为1em， length 是用来设置列与列之间的间距。

.all{column-count: 3;/* margin-left  + margin-right */column-gap: 40px;
}

列和列之间的边框

column-rule：<’ column-rule-width ‘> || <’ column-rule-style ‘> || <’ column-rule-color '> 设置对象的列与列之间的边框。复合属性：包括边框的粗细，颜色，样式样式： dotted 点状边框 dashed 虚线 double 双线 solid 实线

.all{column-count: 3;/* margin-left  + margin-right 
/column-gap: 40px;
*  /*3像素的间隔线 */column-rule: 3px dotted gray;
}

列高是否统一

column-fill：auto | balance 设置对象所有列的高度是否统一; auto：列高度自适应内容; balance：所有列的高度以其中最高的一列统一两个效果基本上一样，没有太大变化

横跨多少列

column-span 属性规定元素应横跨多少列。 column-span: 1|all; 默认为1，一般情况下设置为all

<style>.all{column-count: 3;/* margin-left  + margin-right */column-gap: 40px;column-rule: 3px dotted gray;}.p1{column-span: all;}</style>
<div class="all"><p class="p1">这是一个标题</p><h3>第一段</h3><p>标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。正如您所了解的那样，文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。</p><h3>第二段</h3><p>xmlns 属性在 XHTML 中是必需的，但在 HTML 中不是。不过，即使 XHTML 文档中的 <html> 没有使用此属性，W3C 的验证器也不会报错。这是因为 "xmlns=http://www.w3.org/1999/xhtml" 是一个固定值，即使您没有包含它，此值也会被添加到 <html> 标签中。</p><h3>第三段</h3><p>注释：即使 html 元素是文档的根元素，它也不包含 doctype 元素。doctype 元素必须位于 html 元素之前。</p><h3>第四段</h3><p>这个例子是一个很简单的 HTML 文件，使用了尽量少的 HTML 标签。它向您演示了 body 元素中的内容是如何被浏览器显示的。</p>
</div>

案例：使用多列布局实现瀑布流效果


<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>标题</title><link rel="shortcut icon" href="favicon.ico"><style>* {margin: 0;padding: 0;}.container {width: 96%;margin: 20px auto 20px;}.waterfall {/* 最多氛围多少列 */column-count: 3;-webkit-column-count: 3;-moz-column-count: 3;-ms-column-count: 3;-o-column-count: 3;/* 每列之间的间距是多少 
/column-gap: 15px;-webkit-column-gap: 15px;-moz-column-gap: 15px;-ms-column-gap: 15px;-o-column-gap: 15px;}.item {display: inline-block;width: 100%;
*            /*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 */box-sizing: border-box;padding: 1em;background-color: white;border: 1px solid #ccc;border-radius: 4px;-webkit-border-radius: 4px;/* 设置上下间距 */margin-bottom: 10px;/*  需要设置 height: 100%; overflow: auto */height: 100%;overflow: auto;}.item img {width: 100%;padding-bottom: 1em;margin-bottom: 0.5em;border-bottom: 1px solid #cccccc;}</style><body><div class="container"><div class="waterfall"><div class="item"><img src="img/1.jpg" /><p>我来测试demo111111</p></div><div class="item"><img src="img/7.jpg" />我来测试demo2222</div><div class="item"><img src="img/2.jpg" /><p>我来测试demo3333</p></div><div class="item"><img src="img/9.jpg" /><p>我来测试demo4444</p></div><div class="item"><img src="img/4.jpg" /><p>我来测试demo5555</p></div><div class="item"><img src="img/5.jpg" /><p>我来测试demo6666</p></div><div class="item"><img src="img/6.jpg" /><p>我来测试demo7777</p></div><div class="item"><img src="img/8.jpg" /><p>我来测试demo8888</p></div><div class="item"><img src="img/9.jpg" /><p>我来测试demo8888</p></div></div></div></body>
</html>

使用js实现多列布局

<style>
{margin: 0px;padding: 0px;
}
div {width: 150px;position: absolute;border: 1px solid;
}
img {display: inline-block;width: 150px;
}
#wrap {position: relative;width: 100%;
}
</style>
<body><div>瀑布流<img src="./img/1.jpg" alt=""></div><div>瀑布流<img src="./img/2.jpg" alt=""></div><div>瀑布流<img src="./img/3.jpg" alt=""></div><div>瀑布流<img src="./img/4.jpg" alt=""></div><div>瀑布流<img src="./img/5.jpg" alt=""></div><div>瀑布流<img src="./img/6.jpg" alt=""></div><div>瀑布流<img src="./img/7.jpg" alt=""></div><div>瀑布流<img src="./img/8.jpg" alt=""></div><div>瀑布流<img src="./img/9.jpg" alt=""></div>
</body>
<script>var div = document.getElementsByTagName("div");//因为图片较多，在加载时，就加载图片window.onload = function(){Full();}// Full()//当窗口大小改变时，重新分列并排序window.onresize = function(){Full();}//瀑布流函数function Full(){//1. 获取瀑布流求分几列var pw = document.documentElement.offsetWidth;   //页面宽度var dw = div[0].offsetWidth;           //每个div宽度var cols = Math.floor(pw/dw);//缝隙数等于列数加1，例如6行有7个缝隙var white = (pw - dw * cols)/(cols + 1);//每一列定位var t = 10;var arr = []; // 2. 默认以第一张图片的宽度为多列布局每列的宽度for(var i = 0;i<cols;i++){var pos = {//计算每个div的坐标(开始让每个top取一个固定值)//横坐标每次不变，只有top变/*div[0]   left: whitediv[1]   left: white2 + dw*        div[2]   left: white*3 + dw*2*/x:Math.floor((i+1)*white+dw*i),y:t}arr.push(pos);      //将坐标存入数组}for(var i=0; i<div.length;i++){var index = getMinTop(arr);// 循环遍历第一行数据div[i].style.left = arr[index].x+'px';div[i].style.top = arr[index].y+'px';// 把图片的高度存储在元素的y属性中；改变已经显示图片的y值arr[index].y += div[i].offsetHeight + t;// 查找最小高度的列，默认以arr[0]的y坐标作为最小的列// 第二行最小的列，就是图片高度最低的}}//求每次最小高度的列function getMinTop(arr){var minT = arr[0].y;// console.log(minT);var index = 0;for(var k = 0;k<arr.length;k++){if(arr[k].y < minT){minT = arr[k].y;index = k;}}return index;}
</script>

参考文档：https://blog.csdn.net/qq_47443027/article/details/119981423

查看全文

http://www.lryc.cn/news/610773.html