<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>格子布局</title>
<style>
section{
background: grey;
width: 670px;
overflow: hidden;
}
article{
width: 333px;
height: 233px;
float: left;
text-align: center;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
article:nth-child(even){
border-right: 1px solid red;
}
article:nth-child(1){
border-top: 1px solid red;
}
article:nth-child(2){
border-top: 1px solid red;
}
img{
padding-top: 33px;
width: 33%;
}
</style>
</head>
<body>
<section>
<article>
<img src="img/test.jpg" alt="" class="ims">
<h1>招财树</h1>
<p>招财进宝,日入斗金</p>
</article>
<article>
<img src="img/test.jpg" alt="">
<h1>招财树</h1>
<p>招财进宝,日入斗金</p>
</article>
<article>
<img src="img/test.jpg" alt="">
<h1>招财树</h1>
<p>招财进宝,日入斗金</p>
</article>
<article>
<img src="img/test.jpg" alt="">
<h1>招财树</h1>
<p>招财进宝,日入斗金</p>
</article>
</section>
</body>
</html>