61,129
社区成员
发帖
与我相关
我的任务
分享页面嵌入后，如何让其嵌入到指定div的位置
是这样的，我使用<jsp:include>嵌入6个相同的页面，分别放在6个div中，实际显示的时候，6个div完全在左侧排列，跟实际div的位置不一样，我想让他嵌入实际的div中，该怎么做？
源页面：
被嵌入页面：
被嵌入页面js挺多的，但没有涉及到样式，我就给删掉了
请问，如何才能实现我想要的效果？
源页面：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'sixVedio.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">
-->
<style type="text/css">
#screen{
position:relative;
top:0;
left:0;
width:1920px;
height:1080px;
background:#fff;
}
#screen1{
position:absolute;
margin-top:0;
margin-left:0;
width:200px;
height:200px;
background:#ff0000;
}
#screen2{
position:absolute;
margin-top:500px;
margin-left:0;
width:200px;
height:200px;
background:#00ff00;
}
#screen3{
position:absolute;
margin-top:0;
margin-left:600px;
width:200px;
height:200px;
background:#0000ff;
}
#screen4{
position:absolute;
margin-top:500px;
margin-left:600px;
width:200px;
height:200px;
background:#ffff00;
}
#screen5{
position:absolute;
margin-top:0;
margin-left:1200px;
width:200px;
height:200px;
background:#ff00ff;
}
#screen6{
position:absolute;
margin-top:500px;
margin-left:1200px;
width:200px;
height:200px;
background:#00ffff;
}
</style>
</head>
<body>
<div class="screen">
<div id="screen1"><jsp:include page="DPVedio.jsp" flush="true"><jsp:param name="vedioId" value="v1"/></jsp:include></div>
<div id="screen2"><jsp:include page="DPVedio.jsp" flush="true"><jsp:param name="vedioId" value="v2"/></jsp:include></div>
<div id="screen3"><jsp:include page="DPVedio.jsp" flush="true"><jsp:param name="vedioId" value="v3"/></jsp:include></div>
<div id="screen4"><jsp:include page="DPVedio.jsp" flush="true"><jsp:param name="vedioId" value="v4"/></jsp:include></div>
<div id="screen5"><jsp:include page="DPVedio.jsp" flush="true"><jsp:param name="vedioId" value="v5"/></jsp:include></div>
<div id="screen6"><jsp:include page="DPVedio.jsp" flush="true"><jsp:param name="vedioId" value="v6"/></jsp:include></div>
</div>
</body>
</html>
被嵌入页面：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String vedioId=request.getParameter("vedioId");
%>
<!DOCTYPE html>
<html>
<head>
<style>
#obj{width:100%;height:100%;}
</style>
</script>
</head>
<body>
<div id="obj"></div>
</body>
</html>
被嵌入页面js挺多的，但没有涉及到样式，我就给删掉了
请问，如何才能实现我想要的效果？
...全文
请发表友善的回复…
发表回复
MI_Ws 2017-09-14
- 打赏
- 举报
楼主解决了吗
Love_云宝儿 2017-08-22
- 打赏
- 举报
理论上可行的，但我改成这样，还是不好使
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'sixVedio.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">
-->
<style type="text/css">
#screen{
position:relative;
top:0;
left:0;
width:1920px;
height:1080px;
background:#fff;
}
#screen1{
position:absolute;
display:inline-block;
top:0;
left:0;
width:200px;
height:200px;
background:#ff0000;
}
#screen2{
position:absolute;
display:inline-block;
top:500px;
left:0;
width:200px;
height:200px;
background:#00ff00;
}
#screen3{
position:absolute;
display:inline-block;
top:0;
left:600px;
width:200px;
height:200px;
background:#0000ff;
}
#screen4{
position:absolute;
display:inline-block;
top:500px;
left:600px;
width:200px;
height:200px;
background:#ffff00;
}
#screen5{
position:absolute;
display:inline-block;
top:0;
left:1200px;
width:200px;
height:200px;
background:#ff00ff;
}
#screen6{
position:absolute;
display:inline-block;
top:500px;
left:1200px;
width:200px;
height:200px;
background:#00ffff;
}
</style>
</head>
<body>
<div id="screen">
<div id="screen1"><jsp:include page="DPVedio.jsp" flush="true"><jsp:param name="vedioId" value="v1"/></jsp:include></div>
<div id="screen2"><jsp:include page="DPVedio.jsp" flush="true"><jsp:param name="vedioId" value="v2"/></jsp:include></div>
<div id="screen3"><jsp:include page="DPVedio.jsp" flush="true"><jsp:param name="vedioId" value="v3"/></jsp:include></div>
<div id="screen4"><jsp:include page="DPVedio.jsp" flush="true"><jsp:param name="vedioId" value="v4"/></jsp:include></div>
<div id="screen5"><jsp:include page="DPVedio.jsp" flush="true"><jsp:param name="vedioId" value="v5"/></jsp:include></div>
<div id="screen6"><jsp:include page="DPVedio.jsp" flush="true"><jsp:param name="vedioId" value="v6"/></jsp:include></div>
</div>
</body>
</html>
当作看不见 2017-08-22
- 打赏
- 举报
所有的div 都设置为display:inline-block; 然后再定位;div 默认是块元素,独占一行.
全部设置行内元素,再 135,246排列,就能得到你要的效果,再自己调整距离
