在CSS布局中,可以使用弹性布局(flexbox)来创建不同数量的项目的弹性行。下面是一个包含代码示例的解决方法:
HTML代码:
Item 1
Item 2
Item 3
Item 4
CSS代码:
.flex-container {
display: flex;
flex-wrap: wrap; /* 允许多行布局 */
}
.flex-item {
flex: 1 0 25%; /* 每个项目的弹性宽度为25% */
border: 1px solid black;
padding: 10px;
box-sizing: border-box;
}
在上面的代码中,我们创建了一个父容器 .flex-container
,并将其设置为 flex 布局。使用 flex-wrap: wrap
允许项目在多行布局中换行。
然后,我们创建了四个子项目 .flex-item
,并设置每个项目的弹性宽度为25%(flex: 1 0 25%
)。这表示每个项目可以根据可用空间平均分配宽度,并且最大宽度不能超过25%。
通过以上代码,不同数量的项目都可以在弹性行中适应不同的屏幕尺寸和容器宽度。