search

Home  >  Article  >  Web Front-end  >  .jsp页面中如何把文字写在图片上想要的位置？_html/css_WEB-ITnose

.jsp页面中如何把文字写在图片上想要的位置？_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:36:312271browse

在.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>


定位。相对定位。

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS3 圆角（border-radius）详解_html/css_WEB-ITnoseNext article：使用Brackets_html/css_WEB-ITnose

Related articles

See more