<!DOCTYPE html>
<html lang="en">
<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>CSS COLUMNS</title>
</head>
<body>
<article>
<h1>CSS column</h1>
<div class="list">
<figure>
<figcaption>大雁塔</figcaption>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=844264797,2996895276&fm=26&gp=0.jpg"/>
<p>大雁塔位于唐长安城晋昌坊（今陕西省西安市南）的大慈恩寺内，又名“慈恩寺塔”。唐永徽三年（652年），玄奘为保存由天竺经丝绸之路带回长安的经卷佛像主持修建了大雁塔，最初五层，后加盖至九层，再后层数和高度又有数次变更，最后固定为今天所看到的七层塔身，通高64.517米，底层边长25.5米。</p>
</figure>
<figure>
<figcaption>兵马俑</figcaption>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558888406732&di=1a0942657521e832b22abf0179ac18cb&imgtype=0&src=http%3A%2F%2Fs2.lvjs.com.cn%2Fuploads%2Fpc%2Fplace2%2F2015-03-10%2F273aff26-99a5-481a-a431-1a0aac731a6c.jpg"/>
<p>兵马俑，即秦始皇兵马俑，亦简称秦兵马俑或秦俑，第一批全国重点文物保护单位，第一批中国世界遗产，位于今陕西省西安市临潼区秦始皇陵以东1.5千米处的兵马俑坑内。</p>
</figure>
<figure>
<figcaption>西岳华山</figcaption>
<img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=2f13ded96e81800a7ae8815cd05c589f/4bed2e738bd4b31c794ab3ed85d6277f9e2ff876.jpg"/>
<p>中国著名的五岳之一，中华文明的发祥地，“中华”和“华夏”之“华”，就源于华山。</p>
</figure>
<figure>
<figcaption>广仁寺</figcaption>
<img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=b643b0c807b30f242197e451a9fcba26/cefc1e178a82b901875ad89a7b8da9773812efa0.jpg"/>
<p>西安广仁寺位于西安明城墙内西北角，为中国唯一绿度母主道场，也是陕西地区唯一的一座藏传格鲁派寺院，是清康熙四十四年（1705年），玄烨皇帝来陕西巡视时，拨专款敕建。</p>
</figure>
</div>
</article>
</body>
</html>body{line-height:2;}
ul{list-style: none;}
.list{
column-count: 2;
column-gap: 5vw;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
column-fill: balance-all;
}
.list figure{
height:100%;
margin:0;
overflow: auto;
}
.list figure img{
width: auto;
max-width: 100%;
height:auto;
}
.list p{font-size: 12px;color:#999;}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.