不改变元素宽度
时间: 2024-02-13 22:00:43 浏览: 28
如果您不想改变元素的宽度,可以使用CSS Grid来实现元素的平分。以下是一个简单的示例代码,希望可以帮到您:
HTML代码:
```
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
</div>
```
CSS代码:
```
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 元素最小宽度为200px,平分剩余空间 */
grid-gap: 10px; /* 元素之间的间距 */
}
.item {
border: 1px solid black;
padding: 10px;
}
```
在上述代码中,我们使用了CSS Grid来实现元素的平分。我们设置了容器的display属性为grid,并使用了grid-template-columns属性来定义网格布局的列。其中,repeat(auto-fit, minmax(200px, 1fr))表示最小宽度为200px的列可以自动换行,并让剩余空间平分。我们还设置了元素之间的间距。由于我们没有设置元素的宽度,它们会自动填充网格中的空间,实现平分的效果。