为什么我的 html 和 css 网格不起作用？
[英]Why isnt my html and css grid not working?
问题描述
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div style=" display: grid; grid-template-columns: 100px, 100px;"> <div style="background-color: lightblue;">div 1</div> <div style="background-color: lightpink;">div 2</div> </div> </body> </html>
我一直在尝试用 HTML 和 CSS 制作网格，但它不起作用。 我是 CSS 和 HTML 的新手，所以请告诉我我做错了什么，谢谢！
3 个解决方案
解决方案1
1 2022-07-20 07:10:51
你在 grid-template-columns 中只犯了一个错误，不能包含逗号，所以它必须看起来像这样 grid-template-column:100px 100px;
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div style=" display: grid; grid-template-columns: 100px 100px;"> <div style="background-color: lightblue;">div 1</div> <div style="background-color: lightpink;">div 2</div> </div> </body> </html>
解决方案2
1 已采纳 2022-07-20 07:15:55
解决方案3
0 2022-07-20 07:41:06
在这种情况下，您可以使用grid-template-columns: auto 。 希望能解决你
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div style="display: grid; grid-template-columns: auto auto auto;"> <div style="background-color: lightblue;">div 1</div> <div style="background-color: lightpink;">div 2</div> <div style="background-color: rgb(34, 192, 3);">div 2</div> </div> </body> </html>
为什么我的 html/CSS 网格中的网格不起作用？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.