一个人家里练手的项目，布局问题，大伙儿请进帮帮忙！

目前网页做成如下样子：问题1：左栏点击后结果显示在了左栏。我想做成想csdn论坛这种，无论左栏怎么点，总是在中间显示结果。
问题2：如图，左栏，我想做成单行长度过长就自动换行，而不是现在的显示不全这是mian.jsp代码：<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'mian.jsp' starting page</title>
    
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->  </head>
  
  <body>
<div style="float: left;">
<iframe width="200px" height="800px" scrolling="no" frameborder="0" src="articleAction.action?method=smallListArticle"></iframe><!--跳转到left.jsp -->
</div>
<div align="center">
<!-- <iframe width="700px" height="1000px" scrolling="no" frameborder="0" src="wish/writeWish.jsp"></iframe> -->
<jsp:include page="../wish/writeWish.jsp"></jsp:include>
</div>
  </body>
</html>我的left.jsp:<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'left.jsp' starting page</title>
    
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->  </head>
  
  <body>
   最新发表<br>
  <ul>
  <s:iterator value="listArticleVo" id="listVo">
  <li style="list-style-type:none;"><a href="articleAction.action?method=findById&id=${articleId }">${title }</a></li>
  <li style="list-style-type:none;">${preView }<a href="articleAction.action?method=findById&id=${articleId }">阅读全文</a></li>
  </s:iterator>
  </ul>
  <a href="articleAction.action?method=listArticle">更多文章</a>
  </div>
</html>
++++++++++++++++++++++++
希望天底下所有的程序员都身体健康发大财、、、、、呵呵

解决方案 »

  1.   

    1. 使用Frameset或者iFrame，拦截左栏链接的点击事件
    2. 设置左栏的宽度和word-wrap方式 (CSS设置)
      

  2.   

    使用jQuery来实现，比较简单，具体更好的效果需要你自己去慢慢调节
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Title</title><style type="text/css">
    #sidebar {
        width: 200px;
        float: left;
        background: red;
        overflow: hidden;
    }#main {
        width: 700px;
        float: left;
    }</style><script src="jquery.js"></script>
    <script type="text/javascript">
    $(function() {
        $("#sidebar a").click(function() {
            $("iframe#myFrame").load().attr("src", $(this).attr("href"));
            return false;
        });
    });
    </script>
    </head><body>
        <div id="sidebar">
            <a href="http://www.apple.com">Apple</a><br>
            <a href="http://www.baidu.com">BaiduBaiduBaiduBaidu BaiduBaiduBaidu</a><br>
            <a href="http://www.google.com">Google</a><br>
        </div>
        <div id="main">
            <iframe id="myFrame" width="100%" height="500px"></iframe>
        </div>
    </body>
    </html>
      

  3.   

    你的是什么浏览器？我这Safari，Firefox一切正常，左栏不会消息。
    是不是你没有引入jquery.js这个文件？
      

  4.   

    csdn论坛用到了frame页面拆分。