.jsp页面中如何把文字写在图片上想要的位置？_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:36:312265검색
在.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> 定位。相对定位。
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.