"立即阅读位置的问题"

[day_moon]

页面代码如下：
<div style="width:390px;float:left;height:200px;margin-top:4px;margin-left:2px;">
<a style="float:left;" href="recption.action?bookId=<%=book.getBookId()%>"><img src="<%=book.getBookurl()%>" style="width:150px;height:196px;"/></a>
<ul style="margin-left:20px;">
<li style="margin-top:5px;"><a href="recption.action?bookId=<%=book.getBookId()%>" target="_self"><%=book.getTitle()%> </a></li>
<li style="margin-top:5px;font-size:14px;color:#999;"><%=book.getBookdescribe()%></li>
<p style="margin-top:28%;">
<a href="recption.action?bookId=<%=book.getBookId()%>" target="_self">立即阅读></a></p>
</ul>
</div>


问题：<%=book.getBookdescribe()%>输出的汉字超过20个，“立即阅读”就会向下移。怎么样才能让“立即阅读”保持在图片中的位置，无论你输入多少个汉字，怎么修改？上面的代码。

[day_moon]

忘了加运行的效果图：

[xiedacon]

<div style="width:390px;float:left;height:200px;margin-top:4px;margin-left:2px;position: relative;">
        <a style="float:left;" href="recption.action?bookId=<%=book.getBookId()%"><img src="<%=book.getBookurl()%>" style="width:150px;height:196px;"/></a>
       <ul style="margin-left:20px;">
           <li style="margin-top:5px;"><a href="recption.action?bookId=<%=book.getBookId()%>" target="_self"><%=book.getTitle()%> </a></li>
           <li style="margin-top:5px;font-size:14px;color:#999;"><%=book.getBookdescribe()%></li>
           <p style="margin-top:28%;">
           <a style="position: absolute;top: 180px;left: 160px " href="recption.action?bookId=<%=book.getBookId()%>" target="_self">立即阅读></a></p>
         </ul>
       </div>

[xiedacon]

试试那个，就改变了一下div标签和a标签的style属性，是css的知识，具体看下面的链接 http://zh.learnlayout.com/position.html

[风马博客]

没那么难，把你想固定的位置，分割成不同的div，然后再做你想做的事。 这种方法可以解决很多问题，好好学习下，加油

[a_b_a_b_a_b_a_b]

使用css样式控制一下了，再说了，你直接截取20个汉字显示不就行了，输入多少个汉字你都要在哪里显示吗？不可能吧。