<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位于同一行?
时间: 2024-02-16 11:22:05 浏览: 86
Class-matrix.rar_Cmatrix_class Matrix {
要让container中的三个box2位于同一行,你可以在containerclass属性中添加"row"类。这样,代码会变成这样:
```html
<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元素应该会水平排列在同一行上了。
阅读全文