CSS3 다중 열 레이아웃 열의 사용법은 무엇입니까?
- WBOY원래의
- 2022-03-22 10:08:451942검색
CSS3에서는 다중 열 레이아웃 열을 사용하여 개체의 각 열의 열 너비와 수를 설정합니다. 이 속성은 첫 번째 매개변수가 요소 열의 너비를 설정하고 두 번째 매개변수가 설정됩니다. 요소의 열 수입니다. 구문은 "열: 열 너비 열 수;"입니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css3 다중 열 레이아웃에서 열의 사용법은 무엇입니까?
columns 속성은 열 너비와 열 수를 설정하는 데 사용되는 약어 속성입니다.
구문은 다음과 같습니다.
columns: column-width column-count;
column-width 열의 너비입니다.
column-count 열 수입니다.
객체의 열 수와 각 열의 너비를 설정하거나 검색합니다.
예제는 다음과 같습니다.
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
.newspaper
{
columns:100px 3;
-webkit-columns:100px 3; /* Safari and Chrome */
-moz-columns:100px 3; /* Firefox */
}
</style>
</head>
<body>
<p><strong>注意:</strong> columns属性不支持 Internet Explorer 9以及更早版本的浏览器.</p>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
</body>
</html>출력 결과:
(동영상 공유 학습: css 동영상 튜토리얼)
위 내용은 CSS3 다중 열 레이아웃 열의 사용법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：노드 nvm이 무엇인가요?다음 기사：노드 nvm이 무엇인가요?