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

【问题标题】：Filling in space between two objects dynamically动态填充两个对象之间的空间
【发布时间】：2019-02-10 08:55:31
【问题描述】：

填充这两个对象之间的空间的最佳方法是什么，本质上是制作一个对象来填充从最左边的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>

【问题讨论】：

标签： javascript html css position width

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：