<div class="container"> <div class="row-cols-3"> <div class="box2"> <p> <a href="#"><img src="../static/img/飙升榜.jpg" alt="飙升榜榜" class="circle" ></a> <h2>飙升榜</h2></p> </div> <div class="box2"> <p> <a href="#"><img src="../static/img/新歌榜.jpg" alt="新歌榜" class="circle" ></a> <h2>新歌榜</h2></p></a></p> </div> <div class="box2"> <p><a href="#"><img src="../static/img/热歌榜.jpg" alt="热歌榜" class="circle" ></a> <h2>热歌榜</h2></p></a></p> </div> </div> </div>如何container中的三个box2位于同一行？

要让container中的三个box2位于同一行，你可以在containerclass属性中添加"row"类。这样，代码会变成这样：

<div classcontainer">
    <div class="row">
 <div class="box2">
            <p                <a href="#"><img src="../static/img飙升榜.jpg" alt="飙升榜榜" class="circle"></a>
                <h2>飙升榜</h2>
            </p>
        </div>
        <div class="box2">
            <p>
                <a href="#"><img src="../static/img/新歌榜.jpg" alt="新歌榜" class="circle"></a>
                <h2>新歌榜</h2>
            </p>
        </div>
        <div class="box2">
            <p>
                <a href="#"><img src="../static/img/热歌榜.jpg" alt="热歌榜" class="circle"></a>
                <h2>热歌榜</h2>
            </p>
        </div>
    </div>
</div>

现在，这三个box2元素应该会水平排列在同一行上了。