定位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