CSS3 열 너비 사용법

CSS3 column-width
column-width 속성은 열의 너비를 지정하는 데 사용됩니다.
문법 구조:

column-width: auto|length;

매개변수 분석:
(1).auto: 기본값, 해당 값은 다른 관련 속성에 의해 결정됩니다.
(2).length: 열 너비를 지정합니다(예: 100px).
브라우저 지원:
(1) IE10 및 IE10 이상 브라우저는 이 속성을 지원합니다.
(2) Google Chrome은 이 속성을 지원합니다.
(3). Firefox 브라우저는 이 속성을 지원합니다.
(4).opera 브라우저는 이 속성을 지원합니다.
(5).Safari 브라우저는 이 속성을 지원합니다.
특별 참고 사항:
Firefox 브라우저에는 -moz- 접두사를 추가해야 합니다.
Google 및 Safari 브라우저에는 -webkit- 접두사를 추가해야 합니다.
코드 예:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
.columns {
  border: 1px solid green;
  width: 600px;
  margin: 20px auto;
 
  -webkit-column-width:auto;
  -moz-column-width: auto;
  column-width: auto;
}
</style>
</head>
<body>
<div class="columns">
互联网的出现，极大的促进了信息的交流，随着步伐的前进，网站的交互需求越来越多，但是受限于当时的软硬件条件，
特别是网络环境的限制，非常简单的表单验证都要花费大量的时间在服务器与客户端之间进行传输，
后来改名为JavaScript。随着JavaScript在互联网上的成功运用，微软公司也随之开发了自己的"JavaScript"名叫JScript，
于是在互联网上就出现多种标准的"JavaScript"脚本语言，如果任其发展下去，那么将会严重影响互联网发展，
于是标准化迫在眉睫。最后JavaScript被提交给提交给欧洲计算机制造商协会（ECMA），
并最终推出了ECMA-262标准，定义了名为ECMAScript的脚本语言，从此以后浏览器都将ECMAScript作为JavaScript的实现基础。
</div>
</body>
</html>

코드는 열 너비 값을 기본값인 auto로 설정합니다(생략 가능). 다른 관련 속성이 설정되어 있지 않으므로 단일 열에 표시되는 것을 확인할 수 있습니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
.columns {
  border: 1px solid green;
  width: 600px;
  margin: 20px auto;
 
  -webkit-column-width:auto;
  -moz-column-width: auto;
  column-width: auto;
 
  -moz-column-count:3;
  -webkit-column-count:3;
  column-count:3;
}
</style>
</head>
<body>
<div class="columns">
互联网的出现，极大的促进了信息的交流，随着步伐的前进，网站的交互需求越来越多，但是受限于当时的软硬件条件，
特别是网络环境的限制，非常简单的表单验证都要花费大量的时间在服务器与客户端之间进行传输，
后来改名为JavaScript。随着JavaScript在互联网上的成功运用，微软公司也随之开发了自己的"JavaScript"名叫JScript，
于是在互联网上就出现多种标准的"JavaScript"脚本语言，如果任其发展下去，那么将会严重影响互联网发展，
于是标准化迫在眉睫。最后JavaScript被提交给提交给欧洲计算机制造商协会（ECMA），
并最终推出了ECMA-262标准，定义了名为ECMAScript的脚本语言，从此以后浏览器都将ECMAScript作为JavaScript的实现基础。
</div>
</body>
</html>

코드는 열 개수 값을 3으로 설정합니다. 이는 3열 표시를 설정한다는 의미입니다. 이때 열 너비는 관련 속성에 따라 자동으로 조정됩니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
.columns {
  border: 1px solid green;
  width: 600px;
  margin: 20px auto;
 
  -webkit-column-width:50px;
  -moz-column-width: 50px;
  column-width: 50px;
 
  -moz-column-count:3;
  -webkit-column-count:3;
  column-count:3;
}
</style>
</head>
<body>
<div class="columns">
互联网的出现，极大的促进了信息的交流，随着步伐的前进，网站的交互需求越来越多，但是受限于当时的软硬件条件，
特别是网络环境的限制，非常简单的表单验证都要花费大量的时间在服务器与客户端之间进行传输，
后来改名为JavaScript。随着JavaScript在互联网上的成功运用，微软公司也随之开发了自己的"JavaScript"名叫JScript，
于是在互联网上就出现多种标准的"JavaScript"脚本语言，如果任其发展下去，那么将会严重影响互联网发展，
于是标准化迫在眉睫。最后JavaScript被提交给提交给欧洲计算机制造商协会（ECMA），
并最终推出了ECMA-262标准，定义了名为ECMAScript的脚本语言，从此以后浏览器都将ECMAScript作为JavaScript的实现基础。
</div>
</body>
</html>

위 코드에서는 너비를 50px, 3열로 설정했지만 실제 성능은 너비가 50px이 아닙니다. 이때, 열 너비는 3개의 열과 기본 Column-gap을 일치시킬 수 있는 적절한 값으로 자동 확장됩니다. 특히 Column-gap의 기본값은 1em(px를 사용하는 경우 글꼴의 픽셀 크기)입니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
.columns {
  border: 1px solid green;
  width: 600px;
  margin: 20px auto;
 
  -webkit-column-width:250px;
  -moz-column-width: 250px;
  column-width: 250px;
 
  -moz-column-count:3;
  -webkit-column-count:3;
  column-count:3;
}
</style>
</head>
<body>
<div class="columns">
互联网的出现，极大的促进了信息的交流，随着步伐的前进，网站的交互需求越来越多，但是受限于当时的软硬件条件，
特别是网络环境的限制，非常简单的表单验证都要花费大量的时间在服务器与客户端之间进行传输，
后来改名为JavaScript。随着JavaScript在互联网上的成功运用，微软公司也随之开发了自己的"JavaScript"名叫JScript，
于是在互联网上就出现多种标准的"JavaScript"脚本语言，如果任其发展下去，那么将会严重影响互联网发展，
于是标准化迫在眉睫。最后JavaScript被提交给提交给欧洲计算机制造商协会（ECMA），
并最终推出了ECMA-262标准，定义了名为ECMAScript的脚本语言，从此以后浏览器都将ECMAScript作为JavaScript的实现基础。
</div>
</body>
</html>

열의 총 너비에 Column-gap의 총 너비를 더한 값이 컨테이너 너비보다 크면 열 수가 줄어들고 열 너비가 조정됩니다.
열 너비를 계산하기 위한 기본 공식 제공(열 개수 제외, 기타 관련 속성 값은 기본값임):

column-width = (width-(n-1)*font-size)/n

n 값은 2보다 크거나 같아야 합니다. 설명은 다음과 같습니다.
(1) n은 열 수이고 n-1은 열 사이의 간격(column-gap)입니다.
(2) 기본 간격 크기는 글꼴 크기이므로 (n-1)*font-size는 모든 간격의 크기입니다.
(3).(width-(n-1)*font-size)/n은 열의 너비입니다.
특별 참고 사항: Opera에서는 1px를 빼는 것이 좋습니다. 중국어에도 비슷한 제안이 있는데, 그런 다음 1px 또는 2px을 빼는 것이 좋습니다.

지속적인 학습

새로운 파일

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</title> <style type="text/css"> .columns { border: 1px solid green; width: 600px; margin: 20px auto; -webkit-column-width:250px; -moz-column-width: 250px; column-width: 250px; -moz-column-count:3; -webkit-column-count:3; column-count:3; } </style> </head> <body> <div class="columns"> 互联网的出现，极大的促进了信息的交流，随着步伐的前进，网站的交互需求越来越多，但是受限于当时的软硬件条件，特别是网络环境的限制，非常简单的表单验证都要花费大量的时间在服务器与客户端之间进行传输，后来改名为JavaScript。随着JavaScript在互联网上的成功运用，微软公司也随之开发了自己的"JavaScript"名叫JScript，于是在互联网上就出现多种标准的"JavaScript"脚本语言，如果任其发展下去，那么将会严重影响互联网发展，于是标准化迫在眉睫。最后JavaScript被提交给提交给欧洲计算机制造商协会（ECMA），并最终推出了ECMA-262标准，定义了名为ECMAScript的脚本语言，从此以后浏览器都将ECMAScript作为JavaScript的实现基础。 </div> </body> </html>

제출하다 코드 재설정

자동운전