首页html9宫格图片展示代码怎么写

html9宫格图片展示代码怎么写

时间: 2024-12-24 17:29:53 浏览: 6

HTML 中展示九宫格图片布局通常使用 CSS 的 flexbox 或者 grid 组件来实现。这里是一个简单的示例，使用 flexbox 来创建九宫格： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .container { display: flex; flex-wrap: wrap; justify-content: space-between; /* 水平方向间距 */ padding: 0 10px; /* 边距 */ } .grid-item { flex: 0 0 calc(33.33% - 20px); /* 占位大小，减去两边间距 */ margin-bottom: 10px; /* 底部间距 */ box-sizing: border-box; overflow: hidden; /* 隐藏超出部分 */ } .grid-item img { width: 100%; height: auto; } </style> </head> <body> <div class="container">  <div class="grid-item"><img src="image1.jpg" alt="图片一"></div> <div class="grid-item"><img src="image2.jpg" alt="图片二"></div> <div class="grid-item"><img src="image3.jpg" alt="图片三"></div>  </div> </body> </html> ``` 在这个例子中，`.grid-item` 是每个图片容器，`.container` 是包含所有 `.grid-item` 的父级元素。每张图片占据容器宽度的三分之一，并有适当的边距。

阅读全文