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>

このコードは、column-width 値をデフォルト値 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 に設定します。これは、この時点で、列幅が関連する属性に従って自動的に調整されることを意味します。

<!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 のデフォルト値は 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-count を除き、他の関連する属性値はデフォルトです):

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

n 値は 2 以上である必要があります。以下に説明します:
(1) n は列の数、n-1 は列間のギャップ (列ギャップ) です。
(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>

提出するリセットコード

自動運転