首頁 > web前端 > html教學 > .jsp页面中如何把文字写在图片上想要的位置?_html/css_WEB-ITnose

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

WBOY
發布: 2016-06-24 11:36:31
原創
2295 人瀏覽過

在.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>
登入後複製


定位。相对定位。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板