如何编写CSS将文字显示在图片下方
6个回答
展开全部
1、比如我在div里面书写了一些文字，然后想要在放入一张图片，这时候小伙伴可能会直接想到img标签，其实这个想法是错误的。
2、首先，我们应该先给div设置宽度和高度，保证文字有一个范围。
3、然后通过background给div添加一张图片作为它的背景。
4、通过url()来连接图片，url里面放置的就是背景图片的路径。
5、我就随意的放了一张图片用作背景，注意，路径要写对哦。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
编写CSS将文字显示在图片下方，首先我们是需要3个div，一个总的div包裹着其他2个div，然后在通过给他们设置好图片的width来设置这些div的宽度，自然它将将文字挤下来了，通过代码来理解：
<html>
<head>
<style>
#div1{
width:660px;
height:400px;
border:1px soild #f00;
}
#div2{
width:660px;
height:200px;
border:1px soild #f00;
}
#wenzi{
width:660px;
height:200px;
border:1px soild #f00;
}
</style>
</head>
<body>
<div id='div1'>
<div id='div2'>
<img src='图片地址'>
</div>
<div id='wenzi'></div>
</div>
</body>
</html>
<html>
<head>
<style>
#div1{
width:660px;
height:400px;
border:1px soild #f00;
}
#div2{
width:660px;
height:200px;
border:1px soild #f00;
}
#wenzi{
width:660px;
height:200px;
border:1px soild #f00;
}
</style>
</head>
<body>
<div id='div1'>
<div id='div2'>
<img src='图片地址'>
</div>
<div id='wenzi'></div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
每个图和文字结合为一个li。
然后li里再分图和文字，这里文字就直接用a标签也可以，反正它最后是链接的。
如：
<div>
<ul>
<li><img src="images/img01.jpg" /><a href="#">雷朋经典眼镜</a></li>
<li><img src="images/img02.jpg" /><a href="#">型男风尚短T</a></li>
<li><img src="images/img03.jpg" /><a href="#">数码讲价疯抢</a></li>
<li><img src="images/img04.jpg" /><a href="#">珍珠4折起</a></li>
<li><img src="images/img05.jpg" /><a href="#">原价出口包包</a></li>
<li><img src="images/img06.jpg" /><a href="#">淘妆性感上线</a></li>
</ul>
</div>
这样布局。
然后在定li的宽度。。。
但是这样的话图片还要去写一次链接。所以还有种方法就是。
<ul>
<li><a href="#"><img src="images/img01.jpg" /><span>文字描述</span></a></li>
</ul>
这个和楼上的差不多，但是楼上的是加的P ，我不建议那么做，因为span是内敛标签，P是块级标签。
然后li里再分图和文字，这里文字就直接用a标签也可以，反正它最后是链接的。
如：
<div>
<ul>
<li><img src="images/img01.jpg" /><a href="#">雷朋经典眼镜</a></li>
<li><img src="images/img02.jpg" /><a href="#">型男风尚短T</a></li>
<li><img src="images/img03.jpg" /><a href="#">数码讲价疯抢</a></li>
<li><img src="images/img04.jpg" /><a href="#">珍珠4折起</a></li>
<li><img src="images/img05.jpg" /><a href="#">原价出口包包</a></li>
<li><img src="images/img06.jpg" /><a href="#">淘妆性感上线</a></li>
</ul>
</div>
这样布局。
然后在定li的宽度。。。
但是这样的话图片还要去写一次链接。所以还有种方法就是。
<ul>
<li><a href="#"><img src="images/img01.jpg" /><span>文字描述</span></a></li>
</ul>
这个和楼上的差不多，但是楼上的是加的P ，我不建议那么做，因为span是内敛标签，P是块级标签。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2018-07-29 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
图片默认为内联元素，可以设置图片为块级元素，然后直接写文字就可以在图片下方了。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
直接在图片后面跟个换行符号<br />再跟上文字就可以，不用编写CSS。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
