实例首页
自学教程
IT工具箱
源代码
下载代码
上下布局
点击运行 >
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS repeat() 函数 实例 - 自学教程(runoops.com)</title> <style> #container { display: grid; grid-template-columns: repeat(2, 50px 1fr) 100px; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; } #container>div { background-color: #8ca0ff; padding: 5px; } </style> </head> <body> <div id="container"> <div> 宽度为 50 像素 </div> <div> 宽度随着屏幕宽度变化而变化 </div> <div> 宽度为 50 像素 </div> <div> 宽度随着屏幕宽度变化而变化 </div> <div> 宽度固定为 100 像素 </div> </div> </body> </html>
运行结果：