Question

程序员，我有调整大小的问题。我使用jquery来拖动div并调整它们的大小，但是在调整它们之后img并没有停留在它的初始位置我尝试重新设置所有标签改变它们的属性但我没有找到答案我希望你理解我的问题好吧:)）

关闭图片：由于网站政策，我无法发布img

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

Answer 1

如果我理解正确，您希望图片保留在右上角。由于图像的父div设置为position：relative而图像设置为position：absolute，请尝试设置

top: 0; right: 0;

更新：对不起，我误解了你试图在标记中尝试的内容。尝试在容器div上设置position：relative，在shadow div上设置position：absolute并从图像本身中删除样式。

<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：这是一个显示上述变化的网址：http://dap.bstruthers.com/for_tom.html

Answer 2

因为图像位于阴影容器内，所以在拖动时将边距设置在框外。 Heres a start我已将图像移动到容器div中，您可以看到它与盒子一起拖动。你现在需要做更多的css样式，特别是使用shadow类。

jquery和调整div一致性

2 个答案: