flex 一行放四div 每个div 放三个div
<!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>
本文作者：独而不孤
本文链接：https://www.cnblogs.com/lcaiqin/p/18336297
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步