简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

CSS3 다중 열

CSS3 다중 열

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

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

2.column-count: -count:3;

3.column -gap: 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: 열 높이 적응형 콘텐츠

balance: 모든 열의 높이가 가장 높은 것으로 통일됩니다.
예: column-fill:balance;

7.column-break-before: auto 항상 피하기 | | 페이지 | 열 | 회피 페이지 | 회피 열 개체를 설정하거나 검색하기 전에 줄을 바꿀지 여부.

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

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

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

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

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

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

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

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

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


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

다음 예에서는

요소의 텍스트를 3개의 열로 나눕니다.

     

  
注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。
 
 生长在非洲荒漠地带的依米花，默默无闻，少有人注意过它。许多旅人以为它只是一株草而已。但是，它会在一生中的某个清晨突然绽放出美丽的花朵。 那是无比绚丽的一朵花，似乎要占尽人世间所有色彩一样。它的花瓣儿呈莲叶状儿，每瓣自成一色：红、白、黄、蓝，与非洲大地上空的毒日争艳。 但是，它的花期很短，最多只有两天。两天后它就会随着母株一起枯萎，开花意味着它的生命的终结。

CSS3 여러 열의 열 사이 간격

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

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

    php中文网(php.cn)  

  
注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。
 
 在非洲的荒漠地带，植物的生长需要水分，而开花的植物对水分的需求更大。 非洲一般植物都有庞大的根系采水，以供自身的水分需求。但是依米花没有根系， 它只有惟一的一条主根，孤独地蜿蜒盘曲着钻入地底深处，寻找有水的地方。 那需要幸运和顽强努力，一株依米花往往需要四至五年的时间在干燥的沙漠里寻找水源，然后一点点积聚养分， 在完成蓓蕾所需要的全部养分后，它开花了！所以在它最美丽的时候，它因耗尽了自己的所有的养分而凋零。

CSS3 열 테두리

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

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

다음 예에서는

요소가 모든 열에 걸쳐 있음을 지정합니다.

열 너비를 지정합니다.

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

CSS3 다중 열 속성

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


속성

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

Column-Gap은 열과 열 사이의 간격을 지정합니다.

-Column-Rule 모든 Column-rule-* 속성의 모든 약어

Column-rule-color는 두 열의 색상을 지정합니다. 框Column-SPAN은 몇 개의 열을 확장해야 하는지 지정합니다.

열에 의해 지정된 열 너비

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

지속적인 학습
||

注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。

生长在非洲荒漠地带的依米花，默默无闻，少有人注意过它。许多旅人以为它只是一株草而已。但是，它会在一生中的某个清晨突然绽放出美丽的花朵。 那是无比绚丽的一朵花，似乎要占尽人世间所有色彩一样。它的花瓣儿呈莲叶状儿，每瓣自成一色：红、白、黄、蓝，与非洲大地上空的毒日争艳。 但是，它的花期很短，最多只有两天。两天后它就会随着母株一起枯萎，开花意味着它的生命的终结。
제출하다 코드 재설정
이전 섹션 다음 섹션
튜토리얼 목록
도움을 받다
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~

이 강좌를 시청한 학생들도 학습하고 있습니다.

최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)491416회 재생
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！