<div class="box box3 item">Box 3 <img src="img/box3.jpg" alt=""><br> <div class="label">编辑器</div> <img src="img/box3.jpg" alt=""> <div class="label">编辑器</div> <img src="img/box3.jpg" alt=""> <div class="label">编辑器</div> <img src="img/box3.jpg" alt=""> <div class="label">编辑器</div> <img src="img/box3.jpg" alt=""><div class="label">编辑器</div></div> 用flex布局使文字位于图片的正下方

可以使用以下 CSS 代码：

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
}

.item {
  margin: 10px;
  text-align: center;
}

.label {
  margin-top: 5px;
  font-weight: bold;
}

其中，`display: flex` 表示使用 Flex 布局，`flex-wrap: wrap` 表示当一行放不下所有元素时换行，`justify-content: center` 表示水平居中对齐，`align-items: flex-end` 表示竖直方向对齐到底部。

每个 `.item` 元素包含一个图片和一个标签，通过设置 `margin` 和 `text-align` 实现水平居中和文字位于图片正下方。

相关问题

body { margin: 0; padding: 0; } .container { display: flex; height: 100vh; } .sidebar { width: 300px; height: 100%; background-color: #f0f0f0; border-right: 1px solid #ccc; } .content { flex: 1; display: flex; flex-direction: column; } .box { flex: 1; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 36px; font-weight: bold; text-align: center; box-sizing: border-box; padding: 20px; } .box:nth-child(1) { flex-grow:1; background-color: #f44336; } .box:nth-child(2) { flex-grow:1; background-color: #2196f3; } .box:nth-child(3) { margin-left: 20px; margin-right: 20px; margin-top: 10px; border-radius: 10%; background-color: #4caf50; flex-grow:1.5; } <div class="container"> <div class="sidebar"></div> <div class="content"> <div class="box box1">Box 1</div> <div class="box box2">Box 2</div> <div class="box box3 item">Box 3 <img src="img/box3.jpg" alt=""><br> <div class="label">编辑器</div> <img src="img/box3.jpg" alt=""> <div class="label">编辑器</div> <img src="img/box3.jpg" alt=""> <div class="label">编辑器</div> <img src="img/box3.jpg" alt=""> <div class="label">编辑器</div> <img src="img/box3.jpg" alt=""> <div class="label">编辑器</div> </div> <div class="box box4"> <div class="sub-box">Sub Box 1</div> <div class="sub-box">Sub Box 2</div> <div class="sub-box">Sub Box 3</div> </div> <div class="box box5"> <div class="sub-box">Sub Box 1</div> <div class="sub-box">Sub Box 2</div> </div> </div> </div> 补充样式使box3中的 图片占一行 文字占一行 文字位于图片的正下方,不同图片间存在间距

可以使用flex布局和align-items属性来实现图片和文字一行显示，同时使用justify-content属性来控制图片和文字的对齐方式。代码如下：

.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.item img {
  margin-bottom: 10px;
  width: 100%;
}

.label {
  margin-top: 10px;
}

将上述代码添加到原有的CSS样式中即可。同时，为了让不同图片之间存在一定的间距，可以为img标签添加一个margin-bottom属性。

<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元素应该会水平排列在同一行上了。