<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式列</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
*{
box-sizing:border-box;<!--盒模型解析模式：默认-->
}
.row{
margin:0px -5px;<!--外边距：上下0px 左右：-5px -->
}
.row:after{
content:"";<!-- 内容是空的-->
display:table;<!-- 显示方式：表格-->
clear:both;<!-- 清楚浮动:两边-->
}
.column{
float:left;<!--浮动：向左-->
width:25%;
padding:0px 10px;<!--内边距：上下0px 左右：10px-->
}
.card{
box-shadow:0px 4px 8px rgba(0,0,0,0,2);<!--CSS 阴影里的知识-->
padding:16px;
text-align:center;<!--行距：居中-->
background-color:aliceblue;<!--爱丽丝蓝-->
}
@media screen and (max-width:600px){ <!--媒体查询-->
.column{
width:100%;
display:block;
margin-bottom:20px;
}
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<div class="card">
<h3>第一列</h3>
<p>这是文本</p>
<p>这是文本</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>第二列</h3>
<p>这是文本</p>
<p>这是文本</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>第三列</h3>
<p>这是文本</p>
<p>这是文本</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>第四列</h3>
<p>这是文本</p>
<p>这是文本</p>
</div>
</div>
</div>
</body>
</html>
原文：https://www.cnblogs.com/lszw/p/11214155.html