哭了不知道怎么实现文字放在图片下面

尝试了很多种写法还是做不到

代码

HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两行三列网页布局</title>
    <link rel="stylesheet" href="Box-practice.css">
</head>
    <div id="father">

        <div id="div1">
            <img src="//img1.sycdn.imooc.com\/climg/590fe9770001e63102400135.jpg">
            <label>欢迎来到慕课网学习知识！</label>
        </div>


        <div id="div2">
            <img src="http://img1.sycdn.imooc.com\/climg/590fe97d00011bda02400135.jpg">
<!--            <label>欢迎来到慕课网学习知识！</label>-->
        </div>
        <div id="div3">
            <img src="http://img1.sycdn.imooc.com\/climg/590fe982000150ba02400135.jpg">
<!--            <label>欢迎来到慕课网学习知识！</label>-->
        </div>
        <div id="div4">
            <img src="http://img1.sycdn.imooc.com\/climg/590fe9770001e63102400135.jpg">
<!--            <label>欢迎来到慕课网学习知识！</label>-->
        </div>
        <div id="div5">
            <img src="http://img1.sycdn.imooc.com\/climg/590fe97d00011bda02400135.jpg">
<!--            <label>欢迎来到慕课网学习知识！</label>-->
        </div>
        <div id="div6">
            <img src="http://img1.sycdn.imooc.com\/climg/590fe982000150ba02400135.jpg">
<!--            <label>欢迎来到慕课网学习知识！</label>-->
        </div>

    </div>

</body>
</html>

CSS

#father{
   background-color: yellow;
    width: 1000px;
    margin: 20px auto;
}
#div1{
    margin: 10px 10px;
    float: left;
    text-align: center;

}
#div2{

    margin: 10px 10px;
    float: left;
}
#div3{

    margin: 10px 10px;
    float: left;
}
#div4{

    margin: 10px 10px;
    float: left;
}
#div5{
    margin: 10px 10px;
    float: left;
}
#div6{
    margin: 10px 10px;
    float: left;

}
#div1 image{

    width: 100%;
}

一娆Hacker 2021-01-23

源自：CSS浮动 4-11 编程练习

收起

1回答

好帮手慕小尤 2021-01-23 16:22:36

同学你好，1、同学可以将label标签修改为p标签，或在label标签后添加一个换行标签（br）试一下。如下所示：

2、为div标签设置固定宽度也是可以的。如下所示：

祝学习愉快！

收起回答

提问者一娆Hacker #1

为什么label就不行呢

2021-01-23 16:24:41
好帮手慕小尤回复提问者一娆Hacker #2

同学你好，1、<label> 标签为 input 元素定义标注（标记）label 元素不会向用户呈现任何特殊效果。
2、<p> 标签定义段落。p 元素会自动在其前后创建一些空白。
3、 p标签是块级元素，在浏览器中会占一行，而img和label标签是行内元素，则会在一行显示（块级元素会新起一行，而行内元素不会新起一行），所以使用label标签无法直接两行显示。
祝学习愉快！

2021-01-23 17:42:59