CSS3の複数列レイアウトを実装するにはどうすればよいですか? css3のマルチカラムレイアウト（カラム）の実装方法-CSSチュートリアル-php.cn

CSS3の複数列レイアウトを実装するにはどうすればよいですか? css3のマルチカラムレイアウト（カラム）の実装方法

不言

リリース： 2018-10-17 11:29:59

オリジナル

2537 人が閲覧しました

フロントエンドレイアウトを行う際、テキストを列形式で表示する必要があることがあります。css3 の新しい属性列が登場する前は、複数列のテキスト表示の実装がまだ面倒でしたが、css3 の列レイアウト。テキストの複数列表示の登場がより簡単になりました。次の記事では、css3c の olumns 属性によって実装された複数列レイアウトを紹介します。まずは css3 の列レイアウトを見てみましょう。関連する属性 (参照:

css3 学習マニュアル

)column-count: 要素を区切る最大列数を指定します。

column-fill: 列を埋める方法を指定します。auto のデフォルト値では、各列の高さがコンテンツに応じて自動的に調整され、バランスのすべての列の高さが最も高い列の高さに設定されます。

column-gap: 列間のギャップを指定します。デフォルト値は通常で、1em に相当します。なお、column-gapとcolumn-widthの合計が幅の合計よりも大きい場合、column-countで指定した列数を表示できず、列数と幅はブラウザによって自動調整されます。。

column-rule: すべての column-rule-* 属性の略語属性を設定します。border と同様ですが、スペースを占有しない点が異なります。そのため、column-rule を設定しても列幅が変化しません。変化。また、境界線の幅が列間の列間隔よりも大きい場合、境界線は表示されません。

column-span: 要素がまたがる列の数を指定します。デフォルト値 none は列にまたがらないことを意味し、all はすべての列にまたがることを意味します。たとえば、記事のタイトルを all に設定して複数の列にまたがることができます。

column-width: 列の幅を指定します。列の最小幅を定義します。デフォルト値は auto です。これは、column-count 列の数に応じて列幅が自動的に調整されることを意味します。

上記の属性の中で、最も一般的に使用されるのは、column-width と column-count です。これら 2 つの属性の略語は、次のとおりです。

#col {
-moz-columns: 12 8em;
-webkit-columns: 12 8em;
columns: 12 8em;
}

ログイン後にコピー

上記で宣言された意味。コードの列の幅は 8em ですが、列の合計数は 12 を超えません。

css3 複数列レイアウトの完全な実装コードを見てみましょう:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多列布局</title>
    <style>
        .div {
            column-count: 3;
            column-gap: 90px;
            column-rule: 1px dashed green;
            column-width: 370px;
        }
        .div h1 {
            text-align: center;
            -webkit-column-span: all;
        }
    </style>
</head>
<body>
    <div>
        <h1>我的爱好</h1>
        <h3>第一段内容</h3>
        <p>每个人都生活在成长当中，在成长当中也会有更多的梦想，更多的坚持！慢慢凝结成成长的深海。我=画画</p>
        <h3>第二段内容</h3>
        <p>画画，这个爱好如此的平凡！却感染着大部分女孩的心！看着笔在手中轻轻挥动，纸上一切都活了！走了起来！一片栩栩如生。在学校的一次美术课上，美术老师展示着别的班同学的画，个个栩栩如生，活灵活现！我羡慕极了！小小的心灵被这些美丽的画惊醒了。让我下定了决心，努力地坚持学习美术，学号美术！让我的手用笔一挥也能描述出这种境界！</p>
        <h3>第三段内容</h3>
        <p>画画，这个爱好如此的平凡！却感染着大部分女孩的心！看着笔在手中轻轻挥动，纸上一切都活了！走了起来！一片栩栩如生。在学校的一次美术课上，美术老师展示着别的班同学的画，个个栩栩如生，活灵活现！我羡慕极了！小小的心灵被这些美丽的画惊醒了。让我下定了决心，努力地坚持学习美术，学号美术！让我的手用笔一挥也能描述出这种境界！</p>
        <h3>第四段内容</h3>
        <p>画画，这个爱好如此的平凡！却感染着大部分女孩的心！看着笔在手中轻轻挥动，纸上一切都活了！走了起来！一片栩栩如生。在学校的一次美术课上，美术老师展示着别的班同学的画，个个栩栩如生，活灵活现！我羡慕极了！小小的心灵被这些美丽的画惊醒了。让我下定了决心，努力地坚持学习美术，学号美术！让我的手用笔一挥也能描述出这种境界！</p>
        <h3>第五段内容</h3>
        <p>画画，这个爱好如此的平凡！却感染着大部分女孩的心！看着笔在手中轻轻挥动，纸上一切都活了！走了起来！一片栩栩如生。在学校的一次美术课上，美术老师展示着别的班同学的画，个个栩栩如生，活灵活现！我羡慕极了！小小的心灵被这些美丽的画惊醒了。让我下定了决心，努力地坚持学习美术，学号美术！让我的手用笔一挥也能描述出这种境界！</p>
    </div>
</body>
</html>

ログイン後にコピー

css3 複数列レイアウトの効果は次のとおりです: