让我的div水平流动

<style>
    .container {
        width: 100%;
        overflow: hidden; /* 清除浮动 */
    }
    .item {
        float: left;
        width: 25%; /* 每个div元素占据容器的四分之一宽度 */
        margin: 10px;
    }
</style>

<div class="container">
    <div class="item">内容1</div>
    <div class="item">内容2</div>
    <div class="item">内容3</div>
    <div class="item">内容4</div>
</div>

<style>
    .container {
        display: flex;
        flex-wrap: wrap; /* 当容器宽度不足时自动换行 */
        justify-content: flex-start; /* 左对齐 */
    }
    .item {
        flex: 0 0 25%; /* 每个div元素占据容器的四分之一宽度 */
        margin: 10px;
    }
</style>

<div class="container">
    <div class="item">内容1</div>
    <div class="item">内容2</div>
    <div class="item">内容3</div>
    <div class="item">内容4</div>
</div>

<style>
    .container {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 将容器分为四列，每列宽度相等 */
        grid-gap: 10px; /* 列间距 */
    }
    .item {
        margin: 10px;
    }
</style>

<div class="container">
    <div class="item">内容1</div>
    <div class="item">内容2</div>
    <div class="item">内容3</div>
    <div class="item">内容4</div>
</div>