「CSS3入門」column-widthプロパティのサンプル

2021年2月3日

説明
column-width は CSS のプロパティで、段組みレイアウトで理想的な段の幅を設定します。コンテナーは column-width の値よりも狭い段がないように、できるだけ多くの段を配置します。
使用例

<!DOCTYPE html>

<html>

<head>

<title>this is a sample</title>

<style>

.newspaper

{

column-width:100px;

-moz-column-width:100px; /* Firefox */

-webkit-column-width:100px; /* Safari and Chrome */

}

</style>

</head>

<body>

<p><b>notice:</b>111</p>

</div>

</body>

</html>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>this is a sample</title> <style> .newspaper { column-width:100px; -moz-column-width:100px; /* Firefox */ -webkit-column-width:100px; /* Safari and Chrome */ } </style> </head> <body> <p><b>notice:</b>111</p> <div class="newspaper"> AA BB CC DD </div> </body> </html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>this is a sample</title> 
<style> 
.newspaper
{
      column-width:100px;
      -moz-column-width:100px; /* Firefox */
      -webkit-column-width:100px; /* Safari and Chrome */
}
</style>
</head>
<body>

<p><b>notice:</b>111</p>

<div class="newspaper">
AA
BB
CC
DD
</div>

</body>
</html>

CSS

Posted by arkgame

関連投稿: