程序员，我遇到了调整大小的问题。我使用 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>
最佳答案
如果我没理解错的话，您希望图像保留在右上角。由于图片的父div设置为position:relative而图片设置为position:absolute，尝试设置
top: 0; right: 0;
更新: 抱歉，我误解了您在标记中尝试尝试的内容。尝试在容器 div 上设置 position: relative，在阴影 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
关于jquery 和调整 div 的一致性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5390378/