请教各位大侠,我想让一个ap div元素和一个表格的边对齐,怎么才能够实现啊,前提是表格居中了的
主要是让编辑器里面显示的和浏览器里面显示的一样对齐。代码如下:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//E...
主要是让编辑器里面显示的和浏览器里面显示的一样对齐。代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#apDiv1 {
position:absolute;
left:232px;
top:146px;
width:242px;
height:190px;
background-color:#F00;
layer-background-color:#F00;
border:1px none #000000;
z-index:1;
}
</style>
</head>
<body>
<div id="apDiv1"></div>
<table width="800" border="5" align="center" cellpadding="1" cellspacing="2">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html> 展开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#apDiv1 {
position:absolute;
left:232px;
top:146px;
width:242px;
height:190px;
background-color:#F00;
layer-background-color:#F00;
border:1px none #000000;
z-index:1;
}
</style>
</head>
<body>
<div id="apDiv1"></div>
<table width="800" border="5" align="center" cellpadding="1" cellspacing="2">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html> 展开
展开全部
你的表格是宽度固定,居中。也就是margin-left和margin-right是自适应的,根据屏幕的大小,这两个值是不一样的,所以想让DIV和这个表格对齐,为其设置margin-left或者位置absolute之后设置left都是不能实现的。两种方法
第一:把DIV的宽度设置的跟表格一样,然后让其居中
#apDiv1 { width:800px; margin:0 auto;}
第二:把这个DIV放到一个与这个表格相同宽度的表格中,让这个新表格居中
<table width="800" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><div id=apDiv1></div></td></tr>
</table>
第一:把DIV的宽度设置的跟表格一样,然后让其居中
#apDiv1 { width:800px; margin:0 auto;}
第二:把这个DIV放到一个与这个表格相同宽度的表格中,让这个新表格居中
<table width="800" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><div id=apDiv1></div></td></tr>
</table>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
直接在你的代码上修改的,请拷贝下去看看,希望对你有帮助。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#apDiv1 {
width:800px;
margin:0 auto;
position:relative;
}
#apDiv1 .div_css{
position:absolute;
left:0;
top:146px;
width:242px;
height:190px;
background-color:#F00;
layer-background-color:#F00;
border:1px none #000000;
z-index:1;
}
</style>
</head>
<body>
<div id="apDiv1"><div class="div_css"></div></div>
<table width="800" border="5" align="center" cellpadding="1" cellspacing="2">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#apDiv1 {
width:800px;
margin:0 auto;
position:relative;
}
#apDiv1 .div_css{
position:absolute;
left:0;
top:146px;
width:242px;
height:190px;
background-color:#F00;
layer-background-color:#F00;
border:1px none #000000;
z-index:1;
}
</style>
</head>
<body>
<div id="apDiv1"><div class="div_css"></div></div>
<table width="800" border="5" align="center" cellpadding="1" cellspacing="2">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询