瀑布流佈局
阿新 • • 發佈：2020-08-23
CSS columns分欄佈局教程 #
CSS columns分欄佈局教程
<!DOCTYPE html> <html lang="zh" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"> <title>瀑布流佈局（響應式）</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="container"> <div class="item"> <img src="https://s2.ax1x.com/2019/07/09/Z6JKNd.md.jpg" alt="cat"> <h2>貓（Felis silvestris catus）</h2> <p> 貓（學名：Felis silvestris catus），通常指家貓，為小型貓科動物，是為野貓（又稱斑貓；Felis silvestris）中的亞種[1]，此外也有其他未經過《國際動物命名法規》認可的命名，例如Felis catus。 </p> </div> <div class="item"> <img src="https://s2.ax1x.com/2019/07/09/Z6Jl9I.md.jpg" alt="cat"> <h2>貓（Felis silvestris catus）</h2> <p> 根據遺傳學及考古學分析，人類馴養貓的紀錄可追溯至10,000年前的肥沃月灣地區，古埃及人飼養貓的紀錄可追溯至3,600年前，目的可能為捕鼠及其他齧齒目動物，以防止它們吃掉穀物。[2]現在，貓成為世界上最為廣泛的寵物之一，飼養率僅次於犬（或稱狗），但同時也是危害十分廣泛的外來種，由於獵捕的習慣，威脅著很多原生鳥類、齧齒類的生存。 </p> </div> <div class="item"> <img src="https://s2.ax1x.com/2019/07/09/Z6J13t.md.jpg" alt="cat"> <h2>貓（Felis silvestris catus）</h2> <p> 小部分地方文化在過去亦有食用貓肉的習俗，如越南、中國廣東等地，但現今大部分地區因衛生防疫，或是以貓為寵物等因素而禁止食用貓肉。 </p> </div> <div class="item"> <img src="https://s2.ax1x.com/2019/07/09/Z6JM4A.md.jpg" alt="cat"> <h2>貓（Felis silvestris catus）</h2> <p> 貓（學名：Felis silvestris catus），通常指家貓，為小型貓科動物，是為野貓（又稱斑貓；Felis silvestris）中的亞種[1]，此外也有其他未經過《國際動物命名法規》認可的命名，例如Felis catus。根據遺傳學及考古學分析，人類馴養貓的紀錄可追溯至10,000年前的肥沃月灣地區，古埃及人飼養貓的紀錄可追溯至3,600年前，目的可能為捕鼠及其他齧齒目動物，以防止它們吃掉穀物。[2][3]（等於人類168歲，來自美國德州）。小部分地方文化在過去亦有食用貓肉的習俗，如越南、中國廣東等地，但現今大部分地區因衛生防疫，或是以貓為寵物等因素而禁止食用貓肉。 </p> </div> <div class="item"> <img src="https://s2.ax1x.com/2019/07/09/Z6JKNd.md.jpg" alt="cat"> <h2>貓（Felis silvestris catus）</h2> <p> 更直接的風險是因狩獵而感染野外病菌的貓，會引入例如狂犬病等進入人類生活圈，因此對飼主知識技術與社會責任要求也較高，先進國家的公衛系統普遍會針對野貓進行抓捕絕育，管理意義即在於此。長期飼育的貓平均壽命為12年以上（相當於人類64歲），歷史上最長壽的貓則達38歲[3]（等於人類168歲，來自美國德州）。小部分地方文化在過去亦有食用貓肉的習俗，如越南、中國廣東等地，但現今大部分地區因衛生防疫，或是以貓為寵物等因素而禁止食用貓肉。 </p> </div> <div class="item"> <img src="https://s2.ax1x.com/2019/07/09/Z6JEjK.md.jpg" alt="cat"> <h2>貓（Felis silvestris catus）</h2> <p> 貓（學名：Felis silvestris catus），通常指家貓，為小型貓科動物，是為野貓（又稱斑貓；Felis silvestris）中的亞種[1]，此外也有其他未經過《國際動物命名法規》認可的命名，例如Felis catus。根據遺傳學及考古學分析，人類馴養貓的紀錄可追溯至10,000年前的肥沃月灣地區，古埃及人飼養貓的紀錄可追溯至3,600年前，目的可能為捕鼠及其他齧齒目動物，以防止它們吃掉穀物。 </p> </div> <div class="item"> <img src="https://s2.ax1x.com/2019/07/09/Z6JKNd.md.jpg" alt="cat"> <h2>貓（Felis silvestris catus）</h2> <p> 貓（學名：Felis silvestris catus），通常指家貓，為小型貓科動物，是為野貓（又稱斑貓；Felis silvestris）中的亞種[1]，此外也有其他未經過《國際動物命名法規》認可的命名，例如Felis catus。根據遺傳學及考古學分析，人類馴養貓的紀錄可追溯至10,000年前的肥沃月灣地區，古埃及人飼養貓的紀錄可追溯至3,600年前，目的可能為捕鼠及其他齧齒目動物，以防止它們吃掉穀物。 </p> </div> <div class="item"> <img src="https://s2.ax1x.com/2019/07/09/Z6JKNd.md.jpg" alt="cat"> <h2>貓（Felis silvestris catus）</h2> <p> 貓（學名：Felis silvestris catus），通常指家貓，為小型貓科動物，是為野貓（又稱斑貓；Felis silvestris）中的亞種[1]，此外也有其他未經過《國際動物命名法規》認可的命名，例如Felis catus。根據遺傳學及考古學分析，人類馴養貓的紀錄可追溯至10,000年前的肥沃月灣地區，古埃及人飼養貓的紀錄可追溯至3,600年前，目的可能為捕鼠及其他齧齒目動物，以防止它們吃掉穀物 </p> </div> <div class="item"> <img src="https://s2.ax1x.com/2019/07/09/Z6JmHe.md.jpg" alt="cat"> <h2>貓（Felis silvestris catus）</h2> <p> 現在，貓成為世界上最為廣泛的寵物之一，飼養率僅次於犬（或稱狗），但同時也是危害十分廣泛的外來種，由於獵捕的習慣，威脅著很多原生鳥類、齧齒類的生存。更直接的風險是因狩獵而感染野外病菌的貓，會引入例如狂犬病等進入人類生活圈，因此對飼主知識技術與社會責任要求也較高，先進國家的公衛系統普遍會針對野貓進行抓捕絕育，管理意義即在於此。長期飼育的貓平均壽命為12年以上（相當於人類64歲），歷史上最長壽的貓則達38歲[3]（等於人類168歲，來自美國德州）。小部分地方文化在過去亦有食用貓肉的習俗，如越南、中國廣東等地，但現今大部分地區因衛生防疫，或是以貓為寵物等因素而禁止食用貓肉。 </p> </div> </div> </body> </html>
css
* { } body { margin: 0; padding: 0; background-color: #ccc; } .container { width: 1200px; margin: 20px auto; padding: 0 10px; column-count: 5; -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; } .container .item { width: 100%; margin: 0 0 20px; padding: 10px; overflow: hidden; background-color: #ffffff; break-inside: avoid; border: 1px solid #ccc; } .item img { width: 100%; } .item h2 { margin: 10px 0 0; padding: 0; } .item { padding: 0 0 10px; } @media screen and (max-width: 1200px) { .container { column-count: 3; width: calc(100% - 40px); box-sizing: border-box; padding: 20px 20px 20px 0; } } @media screen and (max-width: 768px) { .container { column-count: 2; } } @media screen and (max-width: 480px) { .container { column-count: 1; } }