如何将三个div图像保持在同一行上？

<style>
    .container {
        display: flex;
    }
    .item {
        flex: 1;
        width: 33.33%;
    }
</style>

<div class="container">
    <div class="item">
        <!-- 第一个图像内容 -->
    </div>
    <div class="item">
        <!-- 第二个图像内容 -->
    </div>
    <div class="item">
        <!-- 第三个图像内容 -->
    </div>
</div>

<style>
    .item {
        float: left;
        width: 33.33%;
        margin-right: 10px;
    }
    .item:last-child {
        margin-right: 0;
    }
</style>

<div class="container">
    <div class="item">
        <!-- 第一个图像内容 -->
    </div>
    <div class="item">
        <!-- 第二个图像内容 -->
    </div>
    <div class="item">
        <!-- 第三个图像内容 -->
    </div>
</div>