「CSS3」column-gap プロパティのサンプル

説明
column-gap は CSS のプロパティで、要素の段または列の間の隙間 (溝) の寸法を設定します。

<length>
段間 (列間) の寸法を <length> として定義します。
使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test sample 2020</title>
<style>
.newscft
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
</style>
</head>
<body>
<p><b>111:</b>222</p>
<div class="newscft">
AA
BB
CC
DD
EE
</div>
</body>
</html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test sample 2020</title> <style> .newscft { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; } </style> </head> <body> <p><b>111:</b>222</p> <div class="newscft"> AA BB CC DD EE </div> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test sample 2020</title> 
<style> 
.newscft
{
      -moz-column-count:3; /* Firefox */
      -webkit-column-count:3; /* Safari and Chrome */
      column-count:3;

      -moz-column-gap:40px; /* Firefox */
      -webkit-column-gap:40px; /* Safari and Chrome */
      column-gap:40px;
}
</style>
</head>
<body>

<p><b>111:</b>222</p>

<div class="newscft">
AA
BB
CC
DD
EE
</div>

</body>
</html>

 

CSS

Posted by arkgame