定位div |嵌套0s

我想在窗体中嵌套窗体。但当然这是非法的代码。
因为这一点，我要放置该div

< DIV ID = “div_2” >

（我在我的文档的末尾有编码），这个表格单元格的：

< TD id =“place_here”>

这甚至有可能吗？
我会使用CSS中的相对位置或绝对位置让自己变得疯狂，试图让我的div在每个浏览器中都处于完美位置。

这就是为什么我在id中给出了表格单元格的原因。
我希望CSS或jQuery将有助于通过指定与容限我相对股利表小区ID =“place_here”和文档
定位div |嵌套0s

<form id="CTRP_Form"> 
<table> 
<tr> 
<td> 
<div id="div_1"><input id="fnam" name="fnam" form="CTRP_Form" type=text></div> 
</td> 
<td id="place_here"> 
<!-- place div id=2 here --> 
</td> 
</tr> 
</table> 
</form> 


<div id="div_2"><form id="query_Form"><input type=submit></form></div>

来源

2013-03-09 JTJohnston

这种方法听起来有点靠不住，我...你为什么不只是移动的第一种形式到表细胞就像你有其他的吗？ – roydukkey 2013-03-09 05:30:25

你，不是顶部，你可以做到这一点定位顶级属性和使用负值

<div id="div_2" style="margin-top:-160px"></div>

希望这适用于你。

<table> 
<tr> 
<td> 
<div id="div_1"> 
<form id="CTRP_Form"> 
<input id="fnam" name="fnam" form="CTRP_Form" type=text> 
</form> 
</div> 
</td> 
<td> 
<div id="div_2"><form id="query_Form"><input type=submit></form></div> 
</td> 
</tr> 
</table>

因为如果你的第一个表格太大，其含量的变化却使出来（如..在选择某些选项的一些投入可能会隐藏）的一些原因。

这是你可以做的。你可以把一个小空div在

那么你的DIV 2将您的第一个表单后走了。

然后使用此javascript来定位div_2相对于父div。

function position_mdiv(){ 

    var pos=$('#parent').position(); 
    var width=$('#parent').outerWidth(); 

    $('#div_2').css({ 
     position: "absolute", 
     top: pos.top + "px", 
     left: (pos.left + width) + "px" 
    }); 

}

然后把它的document.ready jQuery的，所以当页面加载/窗口大小将相应地调整其位置。

$(document).ready(function() { 
    position_mdiv()(); 
    $(window).resize(function() { 
     position_mdiv(); 
    }); 
});

希望这可以解决您的问题。

下面是代码

<html> 
<head> 
<title>Nested Forms</title> 
<script type="text/javascript" src="jquery-1.9.1.min.js"></script> 
</head> 
<body> 
<form> 
<table border="3" width="500" height="400" align="center" style="margin-top:40px"> 
<tr> 
<td style="background:green">Form1 
<input type="text" placeholder="name"/><input type="submit" value="Submit"/> 
</td> 

</tr> 

<tr> 
<td style="background:red" valign="top"><div id="co">form2 place</div></td> 
</tr> 

</table> 
</form> 

<div id="tobepositioned" style="background:yellow; 
width:400px;padding:10px;border:solid 2px #CCC"> 
Form2 
<form name="form2"> 
<input type="text" name="s"/><input type="submit"/> 
</form> 
</div> 

<script language="javascript"> 
$(document).ready(function() { 
position_mdiv(); 

// running this function on resize too 
$(window).resize(function() { 
    position_mdiv(); 
}); 

}); 


// function to position the div2 

function position_mdiv(){ 

var pos=$('#co').position(); 
var width=$('#co').outerWidth(); 
//alert(pos.left); 
$('#tobepositioned').css({ 
position: "absolute", 
top: pos.top + "px", 
left: (pos.left) + "px" 
}); 

} 


</script> 
tested in IE10, Firefox, Chrome 
</body> 
</html>

来源

2013-03-09 09:45:42

我需要第一个。有很多我没有包括的表单输入。 – JTJohnston 2013-03-09 14:22:49

如果我在表格单元格上使用了一个id，我可以将我的外部div与id号码相对吗？
<！ - place div id = 2 here - > – JTJohnston 2013-03-09 14:23:47

你是什么意思？请详细解释。如果你解释得当，我可能会很快解决你的问题。 – 2013-03-09 16:49:08

这里是明确工作的答案。我不需要创建一个额外的父DIV并将其命名为id =“place_here”。命名一个表格单元格id =“place_here”，并使其成为DIV id =“div_2”的父级就足够了。这是一个精彩的小工作。谢谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head> 
<title>test/crtp</title> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="jquery.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    position_mdiv()(); 
    $(window).resize(function() { 
     position_mdiv(); 
    }); 
}) 

function position_mdiv(){ 

    var pos = $('#place_here').position(); 
    var width = $('#place_here').outerWidth(); 

    $('#div_2').css({ 
    position: "absolute", 
    top: pos.top +2 + "px", 
    left: (pos.left -300 + width) + "px" 
}); 

} 

</script> 
<body> 

<form id="CTRP_Form"> 
<table border="1"> 
<tr> 
<td> 
<div id="div_1"><input id="fnam" name="fnam" form="CTRP_Form" type="text"><input type=submit></div> 
</td> 
<td id="place_here" style="background:yellow;width:300px;padding:0px;border:solid 2px #CCC"></td> 
</tr> 
</table> 
</form> 


<div id="div_2"><form id="query_Form"><input id="MyQuery" name="MyQuery" form="query_Form" type="text"><input type=submit></form></div> 

</body> 
</html>

来源

2013-03-10 17:02:06 JTJohnston

jquery和使用id =“”可以做什么，这是惊人的。 – JTJohnston 2013-03-10 17:12:16

定位div |嵌套0​​s

回答

相关问题

定位div |嵌套0s