实例首页
自学教程
IT工具箱
源代码
下载代码
上下布局
点击运行 >
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS minmax() 函数 实例 - 自学教程(runoops.com)</title> <style> #container { display: grid; grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px; 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> DIV 宽度自适应内容宽度，<br /> 但最大宽度为 300 像素 </div> <div> DIV 宽度自适应内容宽度，<br /> 但至少为 200 像素 </div> <div> DIV 宽度固定为 150 像素 </div> </div> </body> </html>
运行结果：