Heim > Artikel > Web-Frontend > .jsp页面中如何把文字写在图片上想要的位置？_html/css_WEB-ITnose
.jsp页面中如何把文字写在图片上想要的位置？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:36:312265Durchsuche
在.jsp页面中，我想把Lv写在图片左上角，球员位置写在右上角，人名写在图片左下角。但是现在文字位置不知道为什么有问题？应该怎么办？代码、图片如下。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Cards Page</title></head><body> <c:forEach items="${cardItems }" var="pci" varStatus="status"> <div style="width: 139px; white-space: nowrap; float: left;"> <a href="${pageContext.request.contextPath }/card/viewCardDetails/${pci.playerCardItemId }"><img style="max-width:90%" alt="" src="<c:out value="${pageContext.request.contextPath }/${pci.playerCard.player.url }" />"></a> <label style="position: relative; top:-10px; left:-145px;"><font style="font-weight: bold;"><c:out value="${pci.playerCard.player.name }"></c:out></font></label> <label style="position: relative; top:-170px; left:-135px;"><font style="font-weight: bold;"><c:out value="${pci.playerCard.player.position.abbreviation }"></c:out></font></label> <label style="position: relative; top:-170px; left:-250px;"><font style="font-weight: bold;">Lv<c:out value="${pci.potentiality }"></c:out></font></label> </div> </c:forEach></body></html>
回复讨论(解决方案)
label属性设置为absolute，使用绝对定位，定个各个标签的位置
@DaveLeeCN 结果所有的Lv、球员位置、人名都堆到一块了。请注意，我的代码里有个for循环，这些图片是for循环出来的，结果不对是不是和这个有关？
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title> Cards Page</title></head><body> <c:forEach items="${cardItems }" var="pci" varStatus="status"> <div style="width: 139px; white-space: nowrap; float: left;"> <a href="${pageContext.request.contextPath }/card/viewCardDetails/${pci.playerCardItemId }"><img style="max-width:90%" alt="" src="<c:out value="${pageContext.request.contextPath }/${pci.playerCard.player.url }" />"></a> <label style="position: absolute; bottom:0px; left:0px;"><font style="font-weight: bold;"><c:out value="${pci.playerCard.player.name }"></c:out></font></label> <!-- <label style="position: relative; top:-170px; left:-145px;"><c:out value="${pci.playerCard.player.number }"></c:out></label> --> <label style="position: absolute; top:0px; right:0px;"><font style="font-weight: bold;"><c:out value="${pci.playerCard.player.position.abbreviation }"></c:out></font></label> <label style="position: absolute; top:0px; left:0px;"><font style="font-weight: bold;">Lv<c:out value="${pci.potentiality }"></c:out></font></label> </div> </c:forEach></body></html> 定位。相对定位。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS3 圆角（border-radius）详解_html/css_WEB-ITnoseNächster Artikel：使用Brackets_html/css_WEB-ITnose