企业🤖AI智能体构建引擎，智能编排和调试，一键部署，支持知识库和私有化部署方案 广告
## 案例 ``` <style> * { margin: 0; padding: 0; } #box { width: 100%; height: 200px; background-color: #cccccc; } /*当 w < 768 子元素宽度为父容器宽度100% */ #box > div{ width: 100%; height: 100%; background-color: skyblue; box-sizing: border-box; border-right: 2px solid blue; border-bottom: 2px solid blue; float: left; } /*768 ~ 992 每一行放置两个子元素 50% */ @media screen and (min-width: 768px){ #box >div{ width: 50%; } } /*当992 ~ 1200 每一行放置三个子元素 33.3% */ @media screen and (min-width: 992px){ #box >div{ width: 33.3%; } } /*当 > 1200 每一行放置四个子元素 25% */ @media screen and (min-width: 1200px){ #box >div{ width: 25%; } } </style> </head> <body> <div id="box"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> ```