jquery和調整div一致性

程序員，我有一個調整大小的問題。我用jquery爲了拖動divs並調整它們大小，但是在調整它們大小之後，img並沒有停留在它的初始位置，我嘗試了restyle改變它們屬性的所有標記，但是我沒有找到答案，我希望你能理解我的問題以及:)jquery和調整div一致性

收盤圖像：我無法發佈，因爲該網站政策

<!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> 

    <title>Untitled Page</title> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 

    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

    <script> 
     $(document).ready(function() { 
      $("#context").draggable(); 
      $("#container").resizable({ alsoResize: ".border1" }); 


     }); 


    </script> 

    <style type="text/css"> 

     .border{ 





    -moz-border-radius-bottomleft: 5px; 


    -moz-border-radius-bottomright: 5px; 


    -webkit-border-bottom-left-radius: 5px; 


    -webkit-border-bottom-right-radius: 5px; 

    -moz-border-radius-topleft: 5px; 


    -moz-border-radius-topright: 5px; 


    -webkit-border-top-left-radius: 5px; 


    -webkit-border-top-right-radius: 5px; 

    } 

    .border1{ 





    -moz-border-radius-bottomleft: 3px; 


    -moz-border-radius-bottomright: 3px; 


    -webkit-border-bottom-left-radius: 3px; 


    -webkit-border-bottom-right-radius: 3px; 

    -moz-border-radius-topleft: 3px; 


    -moz-border-radius-topright: 3px; 


    -webkit-border-top-left-radius: 3px; 


    -webkit-border-top-right-radius: 3px; 

    background-color:White; border-style:solid; border-width:1px; border-color: Black; 

    } 


div.shadow { 

    text-align:center; 

    padding-top:0px; 

    background-color: Gray; 

    border: 1px solid :#336699; 

    width:13px; height:13px; 

    margin-top:3px; 

    margin-left:242px; 







    } 





    </style> 

</head> 

<body id="p"> 



<div id="context" style="margin-left:500px; margin-top:100px;width:260px; " > 
<!-- 
     --> 
    <div id="container" class="border" style=" padding-top:1px;background-color:#336699 ; width:260px; height:195px; "> 


     <div class="shadow" style=" position:relative; padding:0px 0px 0px 0px"> 

        <img id="img" style=" margin-right:auto;margin-left:auto;position: absolute; margin-top:0px; margin-bottom:0px" src="close.png" value="Remove Element" onClick="removeElement('p','context');" /> 

     </div> 

     <div class="border1" style=" width:253px; height:167px; margin-top:8px ; margin-left:3px ;visibility:visible"></div> 

    </div> 





</div> 







<script type="text/javascript"> 
    function show() { 
     document.getElementById('container').style.visibility = 'visible'; 
    } 

    function hide() { 
     document.getElementById('container').style.visibility = 'hidden'; 
    } 

    function removeElement(parentDiv, childDiv) { 

     var child = document.getElementById(childDiv); 
     var parent = document.getElementById(parentDiv); 
     parent.removeChild(child); 

    } 



</script> 



</body> 

</html>

來源

2011-03-22 Tom Hellan

發佈IMG的src和有足夠聲譽的人（像我一樣）會將其編輯到您的帖子中。 – Kyle 2011-03-22 11:29:27

如果我理解正確的IMG，你想要的形象留在右上角。由於圖像的父格設置爲位置：相對的，而圖像設置的位置是：絕對的，可以嘗試設置

top: 0; right: 0;

UPDATE：對不起，我誤會了你試圖嘗試以標記。嘗試設置位置：相對於容器div，設置位置：絕對陰影div和刪除圖像本身的樣式。

<div id="container" class="border" style="padding-top:1px;background-color:#336699; width:260px; height:195px; position:relative;"> 
    <div class="shadow" style="position: absolute; top: 0; right: 5px;"> 
     <img id="img" style="" src="close.png" value="Remove Element" onClick="removeElement('p','context');" /> 
    </div>

更新2：這裏的一個URL，它示出了運行中的上述變化：http://dap.bstruthers.com/for_tom.html

來源

2011-03-22 11:32:47 BStruthers

及其因爲圖像是影子容器拖動時設置餘量外箱的內部。 Heres a start我已經將圖像移動到容器div中，並且您可以看到它與框一起拖動。你現在需要做更多的CSS樣式，特別是陰影類。

來源

2011-03-22 15:39:30 LostLin

jquery和調整div一致性

回答

相關問題