有6个<span>控件,允许3个在一行,不允许换行
时间: 2024-05-07 11:20:54 浏览: 13
可以使用CSS的flexbox布局实现这个要求。HTML代码如下:
```html
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
```
CSS代码如下:
```css
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 33.33%;
height: 100px;
box-sizing: border-box;
border: 1px solid #ccc;
}
```
上面的CSS代码中,`.container`是一个flex容器,`.box`是子元素。`flex-wrap: wrap;`表示当子元素超出容器宽度时,自动换行。`.box`的宽度设置为33.33%,因此三个子元素宽度之和为100%。这样就可以实现3个控件在一行,不允许换行的效果。