Web前端开发之CSS学习笔记7—多列布局

目录

1.column-count：指定列数 

2.column-gap：指定的列之间的差距

3.column-rule：设置列之间的宽度，样式和颜色

4.column-width：指定列的宽度

5.column-span：指定横跨列数

6.columns：设置列宽和列数

7.column-fill：指定如何填充列

---

多列布局的属性：

属性	说明
column-count	指定列数
column-width	指定列宽
columns	column-width和column-count的简写
column-gap	指定列之间的间距
column-fill	指定内容在列与列之间的分布方式
column-span	指定元素横向能跨多少列
column-rule-color	指定列之间的颜色
column-rule-style	指定列之间的样式
column-rule-width	指定列之间的宽度
column-rule	column-rule-color、column-rule-style和column-rule-width的简写

1.column-count：指定列数 

例子1：两列布局演示（有中间空隙）

	
		
		
		
	
	
		两列布局演示
		
			
				左侧
				
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque commodi aliquam saepe eaque dolor aliquid voluptate corrupti est repudiandae quibusdam sint atque. Laborum amet voluptas nesciunt consectetur ullam assumenda sed.
			
			
				右侧
				
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae mollitia omnis sunt minus recusandae sequi et id ipsam ad. Facere autem similique porro et veritatis quas incidunt earum facilis distinctio.
			
		
	

例子2：多列布局

	
		
		
		
	
	
		
			
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci vero voluptatum nulla similique animi nihil eos quas at et incidunt culpa quam magnam quasi aut totam nesciunt perferendis molestiae tempora.
		
	

2.column-gap：指定的列之间的差距

例子3：两列布局（无中间空隙）

	
		
		
		
	
	
		两列布局演示
		
			
				左侧
				
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque commodi aliquam saepe eaque dolor aliquid voluptate corrupti est repudiandae quibusdam sint atque. Laborum amet voluptas nesciunt consectetur ullam assumenda sed.
			
			
				右侧
				
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae mollitia omnis sunt minus recusandae sequi et id ipsam ad. Facere autem similique porro et veritatis quas incidunt earum facilis distinctio.
			
		
	

3.column-rule：设置列之间的宽度，样式和颜色

column-rule-color：指定列之间的颜色

column-rule-style：指定列之间的样式

column-rule-width：指定列之间的宽度

例子4：列间样式设置

	
		
		
		
	
	
		两列布局演示
		
			
				左侧
				
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque commodi aliquam saepe eaque dolor aliquid voluptate corrupti est repudiandae quibusdam sint atque. Laborum amet voluptas nesciunt consectetur ullam assumenda sed.
			
			
				右侧
				
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae mollitia omnis sunt minus recusandae sequi et id ipsam ad. Facere autem similique porro et veritatis quas incidunt earum facilis distinctio.
			
		
	

  

4.column-width：指定列的宽度

例子5：限制最小列宽度

	
		
		
		
	
	
		
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium veritatis ea aliquid rem beatae totam repudiandae rerum atque quibusdam temporibus amet eius? Hic a amet dolore doloremque ad quaerat excepturi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam nostrum quam laboriosam delectus earum sint neque laudantium omnis quae tempora rerum hic ipsa dolorem molestiae perspiciatis. Obcaecati asperiores architecto ea.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem expedita corporis illo enim similique reiciendis perspiciatis voluptas magni numquam obcaecati voluptatem laboriosam officiis voluptate libero esse odit alias ipsam nihil.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci vero voluptatum nulla similique animi nihil eos quas at et incidunt culpa quam magnam quasi aut totam nesciunt perferendis molestiae tempora.
		
	

5.column-span：指定横跨列数

column-span:1;元素应跨越一列

column-span:all;该元素应该跨越所有列

例子6：无column-span时

	 
		 
		 
		
	
	
		
 如何使H2元素横跨所有列：
		
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos explicabo molestias hic minus voluptatem perspiciatis impedit dolor aliquam maiores cumque modi dolorem nisi? Amet numquam vero error ullam minima alias?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus fuga reiciendis voluptatum modi iste nobis consectetur velit similique explicabo totam iusto vel cumque fugit. Qui dignissimos fuga nobis sed quo?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque aspernatur similique minima aperiam nemo repellat sit odio adipisci iure voluptatum nulla ipsam ipsa animi voluptatibus culpa doloribus repellendus quisquam molestiae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ipsa atque suscipit cupiditate quam ullam fugit eius fugiat similique modi officia voluptas voluptate blanditiis impedit quod tenetur recusandae deserunt optio.
		
	

例子7：有column-span:all，h2标题跨所有列

	 
		 
		 
		
	
	
		
 如何使H2元素横跨所有列：
		
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos explicabo molestias hic minus voluptatem perspiciatis impedit dolor aliquam maiores cumque modi dolorem nisi? Amet numquam vero error ullam minima alias?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus fuga reiciendis voluptatum modi iste nobis consectetur velit similique explicabo totam iusto vel cumque fugit. Qui dignissimos fuga nobis sed quo?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque aspernatur similique minima aperiam nemo repellat sit odio adipisci iure voluptatum nulla ipsam ipsa animi voluptatibus culpa doloribus repellendus quisquam molestiae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ipsa atque suscipit cupiditate quam ullam fugit eius fugiat similique modi officia voluptas voluptate blanditiis impedit quod tenetur recusandae deserunt optio.
		
	

6.columns：设置列宽和列数

columns: column-width column-count; 

例子8：设置列宽和列数 

	
		
		
		
	
	
		
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium veritatis ea aliquid rem beatae totam repudiandae rerum atque quibusdam temporibus amet eius? Hic a amet dolore doloremque ad quaerat excepturi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam nostrum quam laboriosam delectus earum sint neque laudantium omnis quae tempora rerum hic ipsa dolorem molestiae perspiciatis. Obcaecati asperiores architecto ea.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem expedita corporis illo enim similique reiciendis perspiciatis voluptas magni numquam obcaecati voluptatem laboriosam officiis voluptate libero esse odit alias ipsam nihil.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci vero voluptatum nulla similique animi nihil eos quas at et incidunt culpa quam magnam quasi aut totam nesciunt perferendis molestiae tempora.
		
	

7.column-fill：指定如何填充列

值	描述
balance	对列进行协调。浏览器应对列长度的差异进行最小化处理。
auto	按顺序对列进行填充，列长度会各有不同。

例子9：填充列

	
		
		
		
	
	
		
			column-fill:balance的演示
			
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo nesciunt beatae officiis cupiditate consequuntur alias sunt quisquam et enim commodi dicta eligendi optio repudiandae officia odit nisi harum repellat deserunt?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo consequuntur velit earum optio quod soluta vero ea nesciunt. Recusandae voluptatum laudantium reiciendis accusantium iusto blanditiis adipisci quod voluptas tempora alias.
		
		
			column-fill:auto的演示
			
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis sit dolorem reiciendis sequi maiores rerum vitae doloribus omnis iste magni aperiam quasi assumenda neque aliquid excepturi quos vero adipisci necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo consequuntur velit earum optio quod soluta vero ea nesciunt. Recusandae voluptatum laudantium reiciendis accusantium iusto blanditiis adipisci quod voluptas tempora alias.