时间戳

首页 > 解决方案 > div 边框可灵活调整大小，内部带有绝对定位的图像，纯 css/javascript

javascript - div 边框可灵活调整大小，内部带有绝对定位的图像，纯 css/javascript

问题描述

我正在创建一个编辑器来为图像设置动画。有些图像是顶级的，有些需要在一个 div 内，作为一个组，具有绝对定位。下面的代码“应该工作”？它有一个错误，你知道它是什么吗？

仅供参考 - 以下文字是为了满足问题需要，比我上面的文字更多。所以，请让我用它来问一个附带问题。一般来说，我发现在事物上粘贴边框有问题，例如：element.style.border="1px solid red"，似乎给我带来了问题，或者：element.style="border:1px solid red"。这两个都应该工作吗？

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Test</title>
<style type="text/css">
.item {
  position: absolute;
  height: auto;
  opacity: 1;
}

.mouseover { border:1px dashed green; }

</style>
<script>
function id(name) { return document.getElementById(name); }
function fixBorder() {
    var w1 = id("part-1").style.width.replace("px", "");
    var h1 = id("part-1").style.height.replace("px", ""); 
  var l1 = id("part-1").style.left.replace("px", "");
  var t1 = id("part-1").style.top.replace("px", "");

    var w2 = id("part-2").style.width.replace("px", "");
  var h2 = id("part-2").style.height.replace("px", ""); 
  var l1 = id("part-2").style.left.replace("px", "");
  var t1 = id("part-2").style.top.replace("px", "");

  // "math" for the group size and position
  var wOverlay = l2 - w1;
  var hOverlay = t2 - h1;

  var wg = w1 + w2 - wOverlay;
  var hg = h1 + h2 - hOverlay;

  var lg = ( l1 < l2 ) ? l1 : l2;
  var tg = ( h1 < h2 ) ? h1 : h2;

  // ok, now how to I apply that math? is it easy? 
    id('group').onmouseover = function(event) {  
      alert("on mouseover");
    if (! event.shiftKey) elem.classList.add('mouseover'); 
    else elem.classList.remove('mouseover');
  }

  id('group').style.left = lg + "px";
  id('group').style.top = hg + "px";

  id('group').style.width =  width + "px";
  id('group').style.height = height + "px";

</script>
</head>
<body>
<div id="group" style="border:5px solid red">
  <img id="part-1" class="item" src="https://dummyimage.com/640x4:3/"> 
  <img id="part-2" class="item" src="https://dummyimage.com/300/09f.png/fff">  
 </div>
</body>
</html>

标签： javascripthtmlcss

解决方案

你的风格position: absolute;和height: auto;打破你的布局尝试删除它，所以边框围绕你的父母

您正在将绝对位置设置为所有您item的位置，所有 div 都class="item"位于左上角，没有指定任何高度。您的图像显示的比实际的 div 大，因为它们溢出了div. 但它div本身没有height设置，这就是为什么你只看到你的边界被压扁

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="ISO-8859-1">
    <title>Test</title>
    <style type="text/css">
    .item {
      /*position: absolute;*/
      /*height: auto;*/
      opacity: 1;
    }
    </style>
    <script>
    
    </script>
    </head>
    <body>
    <div id="group" class="item" style="border:5px solid green">
      <img id="group-1" class="item" src="https://dummyimage.com/640x4:3/"> 
      <img id="group-2" class="item" src="https://dummyimage.com/300/09f.png/fff">  
     </div>
    </body>
    </html>

推荐阅读