CSS/Style/ columns

CSS/Style/ columns

要素をほんとうの意味での段組みにする。

このように指定すると 500px の領域が3分割されて3段組になる。

p{
    width: 500px;
    columns: 3;
}

単に表示領域が3個に別れているわけでなく、完全に段組み定義なので、 すべての文章は1要素に入っているわけだが1段目に入らなくなったら2段目へ流し込まれる。

このようにすることで段の間にいい感じの線を引くこともできる

p{
    width: 500px;
    columns: 3;
    column-rule: solid 1px #000;
}

各段の右端がガタガタなのでこのようにすると新聞的にキッチリと揃う

p{
    width: 500px;
    columns: 3;
    column-rule: solid 1px #000;
    text-align: justify;
}

css/style/columns.txt · 最終更新: 2020-07-21 19:21 by ore