移动端第十三章多列

最新推荐文章于 2022-06-22 20:28:48 发布

LW0512

最新推荐文章于 2022-06-22 20:28:48 发布

阅读量160

点赞数

分类专栏：移动端

本文链接：https://blog.youkuaiyun.com/LW0512/article/details/108928767

版权

移动端专栏收录该内容

25 篇文章

订阅专栏

本文探讨了移动端布局中多列的实现方法，通过实例展示了如何创建和调整多列布局，适用于不同屏幕尺寸的设备。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

多列

属性	描述
column-count	规定元素应该被分隔的列数
column-gap	规定列之间的间隔
column-rule	设置列边框与border写法一样
column-span	规定元素应该横跨的列数
column-width	规定列的宽度
columns	规定设置 column-width 和 column-count 的简写属性

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 1900px;
				border: 1px solid red;
				/*分割列数*/
				/*column-count: 3;*/
				/*设置列之间的宽度*/
				column-gap : 190px;
				/*设置列的样式*/
				column-rule:13px solid red;
				/*规定列数宽度*/
				/*column-width:700px;*/
				/*复合属性*/
				columns:3 400px;
				 
			}
			h1{
				/*针对标题*/
				/*column-span:1/all 独占一行*/ 
				column-span:all;
			}
		</style>
	</head>
	<body>
		<div>
			<h1>中国人民最努力</h1>
			<p>善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良，勤劳善良</p>
		</div>
	</body>
</html>