24张图标排成一个长方形的html代码
时间: 2023-12-30 15:05:58 浏览: 25
以下是一个简单的HTML代码,使用CSS实现24个图标排成一个长方形:
```html
<!DOCTYPE html>
<html>
<head>
<title>Icon Rectangle</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
width: 600px;
height: 400px;
background-color: #f2f2f2;
padding: 20px;
}
.icon {
width: 50px;
height: 50px;
margin: 5px;
background-color: #ccc;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<div class="icon">1</div>
<div class="icon">2</div>
<div class="icon">3</div>
<div class="icon">4</div>
<div class="icon">5</div>
<div class="icon">6</div>
<div class="icon">7</div>
<div class="icon">8</div>
<div class="icon">9</div>
<div class="icon">10</div>
<div class="icon">11</div>
<div class="icon">12</div>
<div class="icon">13</div>
<div class="icon">14</div>
<div class="icon">15</div>
<div class="icon">16</div>
<div class="icon">17</div>
<div class="icon">18</div>
<div class="icon">19</div>
<div class="icon">20</div>
<div class="icon">21</div>
<div class="icon">22</div>
<div class="icon">23</div>
<div class="icon">24</div>
</div>
</body>
</html>
```
这个代码中,我们使用了Flexbox布局来容纳24个图标。我们将`.container`元素设置为`display: flex`,这将使其成为一个Flex容器。我们还将`flex-wrap`属性设置为`wrap`,这将使Flex项在多行中包装。我们将`.icon`元素的宽度和高度设置为50像素,并将`margin`属性设置为5像素。我们还为`.icon`元素设置了`border-radius`属性,以使其呈圆形。最后,我们将所有的图标放在一个`.container`元素中。