瀑布流布局
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;
}
}
浙公网安备 33010602011771号