CSS3 다중 열

CSS3은 텍스트 콘텐츠를 신문처럼 다중 열 레이아웃으로 디자인할 수 있습니다.

다음은 column
1.column-width에서 사용되는 관련 속성입니다. <length> 객체의 각 열
예: -moz-column-width:200px;

2.column-count:<integer> -count:3;

3.column -gap: <length> Normal 객체의 열 사이 간격을 설정하거나 검색합니다. 예: column-gap:normal;column-gap:40px;

4.column -rule:[column-rule-width ] || [column-rule-style ] || [column-rule-color ] 객체의 열 사이의 테두리를 설정하거나 검색합니다. 복합 속성. 테두리 속성과 동일합니다

예: column-rule:10px solid #090;

5.column-span: none | all 객체 요소가 모든 열에 걸쳐 있는지 여부를 설정하거나 검색합니다.

예: column-span:all;

6.column-fill: auto | Balance 객체의 모든 열 높이가 균일한지 여부를 설정하거나 검색합니다.

auto: 열 높이 적응형 콘텐츠

auto: 요소 앞의 줄바꿈 및 새 열 생성을 강제하거나 금지하지 않음

always: 항상 요소 앞의 줄바꿈 및 새 열 생성

avoid: 요소 앞의 줄바꿈 방지 및 새 열 생성

8.column-break -after: 자동 | 항상 | 회피 | 페이지 열 | 개체를 설정하거나 검색한 후 줄 바꿈 여부.

auto: 요소 뒤에 줄을 끊고 새 열을 생성하는 것은 강제되거나 금지되지 않습니다.

항상: 항상 줄을 끊고 요소 뒤에 새 열을 생성합니다.

방지: 줄을 끊지 않고 새 열을 생성합니다.

9.column-break -inside: auto | 회피 | 회피 페이지 | 회피 열 객체 내부에서 줄이 끊어지는지 여부를 설정하거나 검색합니다.

auto: 요소 내부에서 줄 바꿈 및 새 열 생성을 강제하거나 금지하지 않습니다.

CSS3은 여러 열을 생성합니다. 분할이 필요합니다.

다음 예에서는 <div> 요소의 텍스트를 3개의 열로 나눕니다.

<!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>

CSS3 여러 열의 열 사이 간격

column-gap 속성은 열 사이의 간격을 지정합니다.

다음 예에서는 열 사이의 간격을 40픽셀로 지정합니다.

<!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>

CSS3 열 테두리

column-rule-style 속성은 열 사이의 테두리 스타일을 지정합니다.

요소가 열에 걸쳐 있는 정도를 지정합니다.

다음 예에서는 <h2> 요소가 모든 열에 걸쳐 있음을 지정합니다.

열 너비를 지정합니다.

column-width 속성은 열 너비를 지정합니다.

CSS3 다중 열 속성

다음 표에는 모든 CSS3 다중 열 속성이 나열되어 있습니다.

속성

column-count 요소를 분할해야 하는 열 수를 지정합니다. -Column-Fill은 열을 채우는 방법을 지정합니다.

Column-Gap은 열과 열 사이의 간격을 지정합니다.
-Column-Rule 모든 Column-rule-* 속성의 모든 약어
Column-rule-color는 두 열의 색상을 지정합니다. 框Column-SPAN은 몇 개의 열을 확장해야 하는지 지정합니다.

열에 의해 지정된 열 너비
열 색상 너비와 열 개수의 약어를 설정합니다.

지속적인 학습

||

새로운 파일

<!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>

제출하다 코드 재설정
자동운전