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

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

代码

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">  </div> <div id="div3"> <img src="http://img1.sycdn.imooc.com\/climg/590fe982000150ba02400135.jpg">  </div> <div id="div4"> <img src="http://img1.sycdn.imooc.com\/climg/590fe9770001e63102400135.jpg">  </div> <div id="div5"> <img src="http://img1.sycdn.imooc.com\/climg/590fe97d00011bda02400135.jpg">  </div> <div id="div6"> <img src="http://img1.sycdn.imooc.com\/climg/590fe982000150ba02400135.jpg">  </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 元素会自动在其前后创建一些空白。
3、 p标签是块级元素，在浏览器中会占一行，而img和label标签是行内元素，则会在一行显示（块级元素会新起一行，而行内元素不会新起一行），所以使用label标签无法直接两行显示。
祝学习愉快！

2021-01-23 17:42:59