css3複数列レイアウト

CSS3の新しい複数列レイアウトは、従来のHTML Webページのブロックレイアウトモードの強力な拡張機能です。この新しい構文により、WEB開発者は複数の列にテキストを簡単に表示できます。テキストの行が長すぎると、読者が読みにくくなり、間違った行を読んだり、連載を読んだりする可能性があります。人々の視点はテキストの一方の端から他方の端に移動し、次の行の先頭に変わります。動きが大きすぎると、注意力が低下し、読みやすくなります。したがって、最大効率で大画面ディスプレイを使用するには、ページデザインでテキストの幅を制限して、新聞のニュースレイアウトのようにテキストが複数の列に表示されるようにする必要があります。

1.共通の属性

1. column-count：属性設定列の特定の数
2. column-width：属性は列の幅を制御します
3. column-gap：2つの列間のギャップ
4. column-rule：列間の幅、スタイル、色を指定します
5. column-span：要素がまたがる列の数を指定します（n：すべての列をスパンするnを指定：すべての列をスパン）

2.複数の列の使用

<style>
    *{
    
    
        padding: 0;
        margin: 0;
    }
    .wrapper{
    
    
        width:1054px;
        padding:20px;
        margin:0 auto;
        font-family: "微软雅黑",Arial;
        /*设置以几列的方式显示*/
        column-count:2;
        /*指定列宽*/
        column-width:500px;
        /*指定列与列之间的间距*/
        column-gap: 50px;
        /*指定列与列之间间隙的样式*/
        /*column-rule:2px dotted red*/
        /*相对应下面的三个属性*/
        column-rule-color:red;
        column-rule-style:dotted;
        column-rule-width:2px;
    }
    .wrapper > h4{
    
    
        column-span: all;
    }
</style>

3.列の高さのバランス：

列の最大の高さを設定した場合、この時点で、テキストコンテンツは最初の列、2番目の列、3番目の列の順に入力されます

max-height: 300px;

Webフロントエンド通信QQグループ：327814892