html 分页中,高度的自适应问题

day_moon 2016-02-01 03:56:03
运行结果图如下:

想要的效果图如下:

页面代码中的红色区域,设置高度为auto的结果图:



页面代码如下:
页面代码:

<div style="float:left;width:800px;height:1000px;border:1px solid #CCC;margin-left:10px;">
<div style="width:776px;color:#000;
background-color:#F0F0F0;height:15px;padding:12px;">热门推荐</div>
<div style="width:750px;height: 220px;margin-left:20px;margin-top:20px;">
<!-- 循环输出 -->

<s:iterator id="list" value="booklist">
<div style="float:left;width:335px;height:200px;border:1px solid #CCC;margin:10px;">
<img src="<s:property value="bookurl"/>" style="width:150px;height:200px;float:left;"/>
<ul style="float:left;margin:0px;padding-left:8px;">
<li style="line-height:15px;font-size:18px;margin-top:8px;"><s:property value="title"/></li>
<li style="line-height:15px;font-size:12px;color:#CCC;margin-top:5px;margin-left:3px;"><s:property value="author"/></li>
<li style="margin-top:20px;font-size:12px;color:#CCC;width:170px"><s:property value="bookdescribe"/></li>
</ul>
</div>
</s:iterator>
</div>

<!--下面是分页导航-->
<div style="width:200px;margin-left:500px;border:1px solid #E0E0E0;">
<s:set name="pageNo" value="pageNo"></s:set>
<s:set name="totalPage" value="totalPage"></s:set>

<!-- 只有一页 -->
<s:if test="#pageNo==1 && #pageNo==#totalPage">
首页 上一页 下一页 末页
</s:if>
<!-- 最后一页 -->
<s:elseif test="#pageNo==#totalPage">
<a href="more.action?type=1&&pageNo=1">首页</a> <a href="more.action?type=1&&pageNo=${pageNo-1 }">上一页</a> 下一页 末页
</s:elseif>
<!-- 第一页的情况 -->
<s:elseif test="#pageNo==1">
首页 上一页 <a href="more.action?type=1&&pageNo=${pageNo+1 }">下一页</a> <a href="more.action?type=1&&pageNo=${totalPage }">末页</a>
</s:elseif>
<!-- 其他 -->
<s:else>
<a href="more.action?type=1&&pageNo=1">首页</a> <a href="more.action?type=1&&pageNo=${pageNo-1 }">上一页</a>
<a href="more.action?type=1&&pageNo=${pageNo+1 }">下一页</a> <a href="more.action?type=1&&pageNo=${totalPage }">末页</a>
</s:else>
</div>
</div>
跪求大神!!!
问题:无论要显示多少本书,”首页-上一页-下一页-末页“的位置都是在输出完,显示的图书右侧的下面(如:上图的想要的效果图一样),用html样式怎么改?
...全文
447 2 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
day_moon 2016-02-01
  • 打赏
  • 举报
回复
<!-- 下面是分页导航菜单 -->
<div style="width:100%;margin-left:500px;border:1px solid #E0E0E0;height:30px;margin-bottom:0px;
top:50px;">

运行的结果图(分页导航成这样...):
  • 打赏
  • 举报
回复
把分页的div的宽度设为最大的宽度

81,122

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧