CSS3의 다중 열 레이아웃 (매거진과 비슷하게)

 
 Lorem ipsum dolle 앉아 amate, consipetur adipiscing elit. 오그 리브로 마그나, 베나 티스 알리 케트 등. Donec vel tempor dolor. Donec volutpat fringilla porta. 고의적이 아닌 고문을 중지하십시오. 혼란스럽지 않은 별칭으로 앉으세요. 정수의 양을 늘려라. 그러면 정수가 그 자리에 앉는다. //등등 
 

... 너비를 지정하십시오. 600px 스타일 시트에서, 그게 다예요..

이제 열 만들기를 시작하겠습니다..

아래 예에서는 콘텐츠를 두 개의 기둥 와 더불어 열 개수 재산. 이 속성은 브라우저에 지정된 숫자로 내용을 열로 표시하고 브라우저가 각 열의 적절한 너비를 결정하도록합니다.

 article -webkit-column-count : 2; -moz-column-count : 2; 열 개수 : 2;  

개수로 정의되는 것 외에도 열을 지정할 수 있습니다. 열 너비 속성을 생성하고 브라우저에서 몇 개의 열을 생성할지 결정하도록합니다..

이 예에서는 다음에 대한 열 너비를 지정합니다. 150px, 내용이 세 개의 열로 나뉘어졌습니다..

 article -moz-column-width : 150px; -webkit-column-width : 150px; 열 너비 : 150px;  

사양에 명시된 바와 같이. 실제 열 너비는 사용 가능한 공간에 따라 지정된 열 너비보다 넓거나 좁을 수 있습니다. 또한 너비 값이 명시 적으로 지정되지 않은 경우 “자동” 기본값으로 사용되며 이는 또한 “열 없음”.

기둥 간격

기둥 간격 각 열을 구분하는 공백을 정의하십시오. 간격 값은 여자 이름 또는 픽셀, 하지만 사양에 명시된 바와 같이 값은 음수 일 수 없다.. 아래 예에서 우리는 30px, 그래서 열 사이의 공간은 조금 더 넓어 보입니다..

 기사 -webkit-column-gap : 30px; -moz-column-gap : 30px; 기둥 간격 : 30px;  

열 규칙

열 사이에 테두리를 추가하려면 칼럼 룰 속성과 매우 유사하게 작동합니다. 경계 재산. 그래서, 우리가 컬럼 사이에 점선으로 된 경계를두기를 원한다면, 우리는 쓸 수 있습니다;

 article -moz-column-rule : 1px 점선 #ccc; -webkit-column-rule : 1px 점선 #ccc; 열 규칙 : 1px 점선 #ccc;  

칼럼 스팬

이 속성은 칼 스판 ...에서 표 꼬리표. 이 속성의 일반적인 구현은 모든 열에서 콘텐츠의 헤드 라인을 확장하는 것입니다. 여기에 예제가있다..

 기사 h1 -webkit-column-span : 모두; column-span : 모두;  

위의 예에서는 h1 모든 열에 걸쳐 있고, 열 범위가 지정된 경우, 1 기본값으로 사용됩니다. 불행하게도이 글은 Opera의 유일한 작품입니다..

최종 단어

이제는 모두 끝났습니다. CSS3를 사용하여 여러 열을 만드는 데 필요한 모든 요소를 ​​살펴 보았습니다. 초기 모듈에서 언급했듯이이 모듈은 최신 브라우저에서 잘 작동하지만 아직 Internet Explorer에서는 작동하지 않습니다..

궁극적으로 CSS3를 사용하여 열을 만드는 방법에 대해 상당히 잘 알고 있기를 바랍니다. 실험을위한 시간이 있다면 아래의 설명란에 방법과 결과를 자유롭게 공유하십시오. 이 게시물을 읽고 재미있게 해 주셔서 감사합니다..

• 데모
• 소스 다운로드