CSS3は、滝の流れのレイアウトを実現します

 ドライ、長ったらしいない、滝の流れのレイアウトは、複数の列（複数列）CSS3の属性によって、一般的に、ディスプレイの映像関連スタイルで使用される一般的なレイアウト、の一種で話す、あなたは単に同様の効果を得ることができます。

 

具体的な手順：

1.外側の容器は複数の行列（列数）の数と列の間隔（列ギャップ）が設けられています

2.コンテンツ・アイテムは、ブレーク・内部のプロパティ避け、一般的に中断されていないアイテムに。

 

HTMLの構造：

 

<DIV CLASS = "コンテナ"> // 最外层容器 
    の<divクラス= "アイテム"> // 条目 
         の<divクラス= "item__content"> // 条目内容 
            <IMG SRC = ''> 
         </ DIV> 
     </ DIV> 
     <DIV CLASS = "アイテム"> 
         <DIV CLASS = "item__content"> 
              <IMG SRC = ''> 
         </ div> 
     </ div> 
     <！ -より多くのアイテム- >  
        ........ 
。</ div>        

 

CSSスタイル：

 

{.container 
    列 -count :. 4; // 列の複数列の 
    カラム-GAP：0; // 列間隔
} 

.Item { 
    BREAKの -inside：避ける; // 挿入中断を回避する（ボックス本体ページ、カラムまたは地域）。
}

 

 

 

上記コアコードであり、我々はさらに、このようなように要素の幅と高さと位置を設定し、プレフィックスブラウザの追加、などの特定のビジネスに応じて改善するために行う必要があります。