지역 사회 배우다 도구 라이브러리 여가
찾다
한국어

CSS3 다중 열 속성

CSS3의 새로운 다중 열 레이아웃은 기존 HTML 웹 페이지의 블록 레이아웃 모드를 강력하게 확장한 것입니다. 이 새로운 구문을 사용하면 웹 개발자가 여러 열에 텍스트를 쉽게 표시할 수 있습니다. 우리는 텍스트 줄이 너무 길면 독자가 읽기가 더 어려워지고 잘못된 줄을 읽거나 연속적으로 읽을 수 있다는 것을 알고 있습니다. 다음 줄의 시작 부분 안구의 움직임이 너무 크면 주의력이 약해지고 쉽게 읽을 수 없게 됩니다. 따라서 대형 화면 디스플레이를 최대한 효율적으로 사용하려면 신문의 뉴스 레이아웃처럼 텍스트의 너비를 제한하고 텍스트가 여러 열에 표시될 수 있도록 페이지 디자인이 필요합니다. 속성 ~                                                   .

column-fill 열 채우기 방법 지정 column-gap 열 사이의 간격 지정

column-rule 모든 열 규칙-* 속성의 약어

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

column-rule-width는 두 열 사이의 테두리 두께를 지정합니다.

column-span은 요소가 확장되어야 하는 열 수를 지정합니다.

열 너비는 열 너비를 지정합니다.

columns 열 너비 및 열 개수 설정의 약어

열 레이아웃이 있는 브라우저는 완벽하게 호환됩니다.

다중 열 레이아웃 기능을 지원하지 않는 일부 브라우저의 경우 IE9/IE8에서는 이러한 모든 속성이 무시되므로 레이아웃은 전통적인 단일 블록 레이아웃을 나타냅니다.

최대한의 브라우저 호환성을 보장하려면 다중 열 레이아웃 속성을 사용할 때 브라우저 엔진 접두사를 추가하는 것이 가장 좋습니다. 가장 기본적인 유형에는 Google Chrome의 경우 -webkit-, Firefox의 경우 -가 있습니다. -ms- IE 브라우저에서는 마지막으로 접두사 없이 작성하는 것을 잊지 마세요. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
       <style>
          body{font:14px/1.5 georgia,serif,sans-serif;}
              p{margin:0;padding:5px 10px;background:#eee;}
              h1{margin:10px 0;font-size:16px;}
              .test{
                     width:628px;
                     border:10px solid #000;
                     -moz-columns:200px 3;
                     -webkit-columns:200px 3;
                     columns:200px 3;
              }
              .test2{
                     border:10px solid #000;
                     -moz-columns:200px;
                     -webkit-columns:200px;
                     columns:200px;
              }
      
       </style>
  </head>
  <body>
    <h1>列数及列宽固定:</h1>
       <div>
              <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
              <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
       </div>
       <h1>列宽固定，根据容器宽度液态分布列数:</h1>
       <div>
              <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
              <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
       </div>
  </body> 
</html>


column-count:

<integer> 자동 개체의 열 번호를 설정하거나 검색합니다. 예: -webkit-column-count:3;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
       <style>
           .columns{width:300px;}
           .columns .title{margin-bottom:5px; line-height:25px; background:#f0f3f9; text-indent:3px; font-weight:bold; font-size:14px;}
          .columns .column_count{
             -webkit-column-count:3;
             -moz-column-count:3;
          }
      </style>
  </head>
  <body>
    <div>columns-count</div>
    <div>
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。
      根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，
      预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。   
    </div>
     </body> 
</html>


column-gap:

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
       <style>
           .columns{width:300px;}
              .columns .title{margin-bottom:5px; line-height:25px; background:#f0f3f9; text-indent:3px; font-weight:bold; font-size:14px;}
              .columns .column_gap{
                 -webkit-column-count:2;
                 -moz-column-count:2;
                 -webkit-column-gap:40px;
                 -moz-column-gap:40px;
              }
      </style>
  </head>
  <body>
    <div>columns-gap</div>
    <div>
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。   
    </div>
</body> 
</html>


열 규칙:


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

column-rule-width 속성은 두 열의 테두리 두께를 지정합니다. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
     <style>
         .newspaper
         {
              column-count:3;
              column-gap:40px;
              column-rule-style:outset;
              column-rule-width:10px;
 
              /* Firefox */
              -moz-column-count:3;
              -moz-column-gap:40px;
              -moz-column-rule-style:outset;
              -moz-column-rule-width:10px;
 
              /* Safari and Chrome */
              -webkit-column-count:3;
              -webkit-column-gap:40px;
              -webkit-column-rule-style:outset;
              -webkit-column-rule-width:3px;
         }
    </style>
  </head>
  <body>
    <div class="newspaper">
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。
      根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，
      预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。    
    </div>
  </body> 
</html>

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
     <style>
         .newspaper
         {
              column-count:3;
              column-gap:40px;
              column-rule-style:dashed;
 
              /* Firefox */
              -moz-column-count:3;
              -moz-column-gap:40px;
              -moz-column-rule-style:dashed;
 
              /* Safari and Chrome */
              -webkit-column-count:3;
              -webkit-column-gap:40px;
              -webkit-column-rule-style:dashed;
         }
    
     </style>
  </head>
  <body>
    <div class="newspaper">
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。    
    </div>

  </body> 
 
</html>

column-rule-color 속성은 두 열의 테두리 색상을 지정합니다. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
<style>
   .newspaper
        {
            column-count:3;
            column-gap:40px;
            column-rule-style:outset;
            column-rule-color:blue;
            /* Firefox */
            -moz-column-count:3;
            -moz-column-gap:40px;
            -moz-column-rule-style:outset;
            -moz-column-rule-color:blue;
            /* Safari and Chrome */
            -webkit-column-count:3;
            -webkit-column-gap:40px;
            -webkit-column-rule-style:outset;
            -webkit-column-rule-color:blue;
        }
</style>
  </head> 
  <body>
    <div class="newspaper">
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。
    </div>
  </body>  
</html>

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
<style>
   .newspaper
        {
        column-count:4;
        -moz-column-count:4; /* Firefox */
        -webkit-column-count:4; /* Safari and Chrome */
        }
      h3
        {
        column-span:all;
        -webkit-column-span:all; /* Safari and Chrome */
        }
</style>
  </head> 
  <body>
    <h3>最新军事消息</h3>
    <div class="newspaper">
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。
    </div>
  </body>  
</html>

열 너비를 지정합니다.

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
<style>
      body{font:14px/1.5 georgia,serif,sans-serif;}
        p{margin:0;padding:5px 10px;background:#eee;}
        h1{margin:10px 0;font-size:16px;}
        .test{
        width:628px;
        border:10px solid #000;
        -moz-column-width:200px;
        -moz-column-count:3;
        -webkit-column-width:200px;
        -webkit-column-count:3;
        column-width:200px;
        column-count:3;
        }
        .test2{
        border:10px solid #000;
        -moz-column-width:200px;
        -webkit-column-width:200px;
        column-width:200px;
        }
        .test3{
        border:10px solid #000;
        -moz-column-count:5;
        -webkit-column-count:5;
        column-count:5;
        }
</style>
</head> 
<body>
      <h1>列数及列宽固定:</h1>
        <div class="test">
        <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
        <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
        </div>
        <h1>列宽固定，根据容器宽度液态分布列数:</h1>
        <div class="test2">
        <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
        <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
        </div>
        <h1>列数固定，根据容器宽度液态分布列宽:</h1>
        <div class="test3">
        <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
        <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
        </div>
</body>  
</html>


지속적인 학습
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body{font:14px/1.5 georgia,serif,sans-serif;} p{margin:0;padding:5px 10px;background:#eee;} h1{margin:10px 0;font-size:16px;} .test{ width:628px; border:10px solid #000; -moz-column-width:200px; -moz-column-count:3; -webkit-column-width:200px; -webkit-column-count:3; column-width:200px; column-count:3; } .test2{ border:10px solid #000; -moz-column-width:200px; -webkit-column-width:200px; column-width:200px; } .test3{ border:10px solid #000; -moz-column-count:5; -webkit-column-count:5; column-count:5; } </style> </head> <body> <h1>列数及列宽固定:</h1> <div class="test"> <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p> <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p> </div> <h1>列宽固定，根据容器宽度液态分布列数:</h1> <div class="test2"> <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p> <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p> </div> <h1>列数固定，根据容器宽度液态分布列宽:</h1> <div class="test3"> <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p> <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p> </div> </body> </html>
제출하다코드 재설정
이전 섹션 다음 섹션
튜토리얼 목록
도움을 받다
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~

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

최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)  492963회 재생