哈喽，各位小伙伴！今天给大家来css控制div完成田字型样式，来，看看下面的效果图：
一看就知道你们想要代码了，不急。代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
<style>
#one {
width: 250px;
height: 300px;
/* background: blue; */
float: left;
}
#two {
width: 250px;
height: 300px;
/* background: red; */
}
</style>
</head>
<body>
<div class="container" style=" justify-content: center; display: flex;">
<div id="one" style=" display: flex;flex-direction: column;">
<div style="height: 50%; width: 100%; display: flex; flex-direction: column">
<div class="img-tip"><div class="img-tip">推至商品</div></div>
<div style="display: flex;align-items: center;justify-content: space-between;flex: 1;">
<div style="flex: 1;height: 100%;"">
<img src="C:\Users\Administrator\Pictures\Screenshots\3.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 auto;" alt="Your Image"> <!-- 替换成你的图片路径 -->
</div>
<div style="flex: 1;height: 100%;"">
<img src="C:\Users\Administrator\Pictures\Screenshots\3.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 auto;" alt="Your Image"> <!-- 替换成你的图片路径 -->
</div>
</div>
</div>
<div style="height: 50%; width: 100%; display: flex; flex-direction: column">
<div class="img-tip"><div class="img-tip">推至商品</div></div>
<div style="display: flex;align-items: center;justify-content: space-between;flex: 1;">
<div style="flex: 1;height: 100%;display: flex;justify-content: center;align-items: center;">
<img src="C:\Users\Administrator\Pictures\Screenshots\3.jpg" style="object-fit: cover; display: block; margin: 0 auto;" alt="Your Image"> <!-- 替换成你的图片路径 -->
</div>
</div>
</div>
</div>
<div id="two" style=" display: flex;flex-direction: column;">
<div style="height: 50%; width: 100%; display: flex; flex-direction: column">
<div class="img-tip"><div class="img-tip">推至商品</div></div>
<div style="display: flex;align-items: center;justify-content: space-between;flex: 1;">
<div style="flex: 1;height: 100%;"">
<img src="C:\Users\Administrator\Pictures\Screenshots\1.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 auto;" alt="Your Image"> <!-- 替换成你的图片路径 -->
</div>
<div style="flex: 1;height: 100%;"">
<img src="C:\Users\Administrator\Pictures\Screenshots\1.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 auto;" alt="Your Image"> <!-- 替换成你的图片路径 -->
</div>
</div>
</div>
<div style="height: 50%; width: 100%; display: flex; flex-direction: column">
<div class="img-tip"><div class="img-tip">推至商品</div></div>
<div style="display: flex;align-items: center;justify-content: space-between;flex: 1;">
<div style="flex: 1;height: 100%;"">
<img src="C:\Users\Administrator\Pictures\Screenshots\1.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 auto;" alt="Your Image"> <!-- 替换成你的图片路径 -->
</div>
<div style="flex: 1;height: 100%;"">
<img src="C:\Users\Administrator\Pictures\Screenshots\1.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 auto;" alt="Your Image"> <!-- 替换成你的图片路径 -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>
