Question

填充这两个对象之间的空间的最佳方法是什么，实质上是使一个对象从a的最左a到b的最右填充该空间。我需要一个动态的解决方案，因为A和B的位置会有所不同，所以有时B会比A靠得更远。我希望它们从两个单独的对象开始。还请注意，我只希望填充两者之间的空间，外面没有其他东西。

function myFunction() {
  var x = document.getElementById('a');
  var y = document.getElementById('b');

  x.style.right = "70%";
  y.style.right = "50%";

  var greenRect = x.getBoundingClientRect();
  var blueRect = y.getBoundingClientRect();

}

h1 {
  position: relative;
  width: auto;
  height: 50px;
  background-color: beige;
}

h2 {
  position: relative;
}

#a {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: green;
  float: right;
  margin-left: -50px;
  transform-origin: left;
  border-radius: 50%;
}

#b {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: green;
  float: right;
  border-radius: 50%;
}

<h1>
  <div id='a'></div>
  <div id='b'></div>
</h1>


<h2>


  <button onclick='myFunction()'>PRESS</button>


</h2>

Answer 1

    
function myFunction() {
    var x = document.getElementById('a');
    var y = document.getElementById('b');

    
    x.style.right = "70%";
    y.style.right = "50%";
    
    var greenRect = x.getBoundingClientRect();
    var blueRect = y.getBoundingClientRect();
    
    y.style.width = (blueRect.left - greenRect.left) + "px";
 
}

        
        h1 {
            position: relative;
            width: auto;
            height: 50px;
            background-color: beige;
        }
        
        
        h2 {
            position: relative;
        }
        
        
        #a {
            position:relative;
            width: 50px;
            height: 50px;
            background-color: green;
            float: right;
            margin-left: -50px;
            transform-origin: left;
        }
       
        #b {
            position:relative;
            min-width: 50px;
            height: 50px;
            background-color: green;
            float: right;
        }

<h1>
    <div id = 'a'></div>
    <div id = 'b'></div>
</h1>
    
    
<h2>
    
    
    <button onclick = 'myFunction()'>PRESS</button>
    
    
    </h2>

Answer 2

您可以使用一些背景和阴影对话框来直观地填充之间的空间：

var x = document.getElementById('a');
  var y = document.getElementById('b');

function myFunction() {

  var r = Math.random()*100;
  y.style.right=r+"%";
  x.style.right=(Math.random()*(100 - r) + r)+"%";

}

h1 {
  overflow:auto;
  background-color: blue;
  color:#fff;
  text-align:center;
}

#a {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: green;
  float: right;
  margin-left: -50px;
  transform-origin: left;
  border-radius: 50%;
  box-shadow:-50vw 0 0 50vw beige;
}

#b {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: green;
  float: right;
  border-radius: 50%;
  box-shadow:50vw 0 0 50vw beige;
}

<h1>
  <div id='a'>1</div>
  <div id='b'>2</div>
</h1>


<h2>


  <button onclick='myFunction()'>PRESS</button>


</h2>

动态填充两个对象之间的空间

2 个答案: