菜鸟教程在线编辑器

AI 编程工具
 
                <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.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>
              