css多行布局 |css3文本上下滚动效果

/* 示例1: flex布局 */
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 0 30%;
margin: 10px;
}

示例1使用了flex布局，可以让容器自动适应不同的屏幕大小和设备尺寸，非常灵活。flex-wrap属性可以让项目在一行排不下时自动换行。而且item元素的宽度也是自适应的，可以根据实际情况调整比例。

/* 示例2: grid布局 */
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-gap: 20px;
}
.item {
grid-column: span 1;
grid-row: span 1;
}

示例2使用了grid布局，同样也可以自动适应不同的屏幕大小和设备尺寸。grid-template-columns属性可以让布局把宽度分成若干列。grid-gap属性可以让item元素之间留出一些空隙，使得整个页面更加美观。

/* 示例3: column-count布局 */
.container {
column-count: 3;
column-gap: 20px;
}
.item {
break-inside: avoid;
}

示例3使用了column-count布局，可以让内容分成多列展示。column-gap属性可以让列之间留出一些空隙。break-inside属性可以防止item元素被分割到两列之间。

以上三个示例是常用的CSS多行布局方式，可以根据不同的需求选择合适的方式进行布局。