两个物体之间填充空间动态地

Question

什么是填补这两个对象之间的空间的最佳方式，从根本上让从最左边的一个填充空间B的最右边的一个对象。我需要一个动态的解决方案，因为A和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>