<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.outer-div {
display: flex;
width: 25%; /* 每个外部div占据100%宽度的25% */
box-sizing: border-box;
padding: 10px; /* 根据需要调整间距 */
}
.inner-div {
flex: 1; /* 内部div平均分配宽度 */
margin: 5px; /* 根据需要调整间距 */
background-color: #f0f0f0; /* 背景色 */
border: 1px solid #ccc; /* 边框 */
padding: 10px; /* 根据需要调整内部div的内边距 */
text-align: center; /* 文本居中 */
}
</style>
</head>
<body>
<div class="container">
<div class="outer-div">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
</div>
<div class="outer-div">
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
</div>
<div class="outer-div">
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</div>
<div class="outer-div">
<div class="inner-div">10</div>
<div class="inner-div">11</div>
<div class="inner-div">12</div>
</div>
</div>
</body>
</html>
