CSS3 다중 열
CSS3은 텍스트 콘텐츠를 신문처럼 다중 열 레이아웃으로 디자인할 수 있습니다.
다음은 column
1.column-width에서 사용되는 관련 속성입니다. <length> 객체의 각 열
예: -moz-column-width:200px;
2.column-count:<integer> -count:3;
4.column -rule:[column-rule-width ] || [column-rule-style ] || [column-rule-color ] 객체의 열 사이의 테두리를 설정하거나 검색합니다. 복합 속성. 테두리 속성과 동일합니다
5.column-span: none | all 객체 요소가 모든 열에 걸쳐 있는지 여부를 설정하거나 검색합니다.
6.column-fill: auto | Balance 객체의 모든 열 높이가 균일한지 여부를 설정하거나 검색합니다.
balance: 모든 열의 높이가 가장 높은 것으로 통일됩니다.
예: column-fill:balance;
7.column-break-before: auto 항상 피하기 | | 페이지 | 열 | 회피 페이지 | 회피 열 개체를 설정하거나 검색하기 전에 줄을 바꿀지 여부.
auto: 요소 앞의 줄바꿈 및 새 열 생성을 강제하거나 금지하지 않음
always: 항상 요소 앞의 줄바꿈 및 새 열 생성avoid: 요소 앞의 줄바꿈 방지 및 새 열 생성
8.column-break -after: 자동 | 항상 | 회피 | 페이지 열 | 개체를 설정하거나 검색한 후 줄 바꿈 여부.
auto: 요소 뒤에 줄을 끊고 새 열을 생성하는 것은 강제되거나 금지되지 않습니다.
항상: 항상 줄을 끊고 요소 뒤에 새 열을 생성합니다.방지: 줄을 끊지 않고 새 열을 생성합니다.
9.column-break -inside: auto | 회피 | 회피 페이지 | 회피 열 객체 내부에서 줄이 끊어지는지 여부를 설정하거나 검색합니다.
auto: 요소 내부에서 줄 바꿈 및 새 열 생성을 강제하거나 금지하지 않습니다.
다음 예에서는 <div> 요소의 텍스트를 3개의 열로 나눕니다. CSS3 여러 열의 열 사이 간격 column-gap 속성은 열 사이의 간격을 지정합니다. 다음 예에서는 열 사이의 간격을 40픽셀로 지정합니다. CSS3 열 테두리 column-rule-style 속성은 열 사이의 테두리 스타일을 지정합니다. 요소가 열에 걸쳐 있는 정도를 지정합니다. 다음 예에서는 <h2> 요소가 모든 열에 걸쳐 있음을 지정합니다. 열 너비를 지정합니다. column-width 속성은 열 너비를 지정합니다. CSS3 다중 열 속성 다음 표에는 모든 CSS3 다중 열 속성이 나열되어 있습니다. 속성 column-count 요소를 분할해야 하는 열 수를 지정합니다. -Column-Fill은 열을 채우는 방법을 지정합니다. -Column-Rule 모든 Column-rule-* 속성의 모든 약어 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>
<div class="newspaper">
生长在非洲荒漠地带的依米花，默默无闻，少有人注意过它。许多旅人以为它只是一株草而已。但是，它会在一生中的某个清晨突然绽放出美丽的花朵。
那是无比绚丽的一朵花，似乎要占尽人世间所有色彩一样。它的花瓣儿呈莲叶状儿，每瓣自成一色：红、白、黄、蓝，与非洲大地上空的毒日争艳。
但是，它的花期很短，最多只有两天。两天后它就会随着母株一起枯萎，开花意味着它的生命的终结。
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>
<div class="newspaper">
在非洲的荒漠地带，植物的生长需要水分，而开花的植物对水分的需求更大。
非洲一般植物都有庞大的根系采水，以供自身的水分需求。但是依米花没有根系，
它只有惟一的一条主根，孤独地蜿蜒盘曲着钻入地底深处，寻找有水的地方。
那需要幸运和顽强努力，一株依米花往往需要四至五年的时间在干燥的沙漠里寻找水源，然后一点点积聚养分，
在完成蓓蕾所需要的全部养分后，它开花了！所以在它最美丽的时候，它因耗尽了自己的所有的养分而凋零。
</div>
</body>
</html>
