Отзывчивая ширина div между двумя другими движущимися div - PullRequest
Новая
       18

Отзывчивая ширина div между двумя другими движущимися div

0 голосов
/ 09 октября 2019

Есть ли способ использовать CSS для изменения ширины черного div с перемещением между синими / зелеными div, между которыми он находится, чтобы он никогда не выходил за пределы пространства между двумя внешними div? Я понимаю, что есть способы использования JavaScript и математики, но мне интересно, есть ли более простой способ использования CSS. 

        var one = document.getElementById('one');
        var two = document.getElementById('two');
        var gap = document.getElementById('gap');
        var gapRect = gap.getBoundingClientRect();
        
        
        
    function myFunct() {
        one.style.transform = 'translateX(200%)';
        two.style.transform = 'translateX(-400%)';
    }    
        
    function myFunct2() {
        one.style.transform = 'translateX(800%)';
        two.style.transform = 'translateX(-900%)';
    }
    
        #line {
            display:flex;
            height:100px;
            width:90%;
            border:1px solid red;
            margin:auto;
            margin-top:25px;
        }
        
        #line div {
            position: relative;
            transition-duration: 1s;
        }
        
        #one {
            width:50px;
            margin-left:50px;
            height:100%;
            background-color: blue;
        }
        
        #two {
            width:50px;
            height:100%;
            background-color:green;
            margin-left:auto;
        }
     
        #gap {
            width:100%;
            height:50%;
            align-self: center;
            background-color: black;
        }
<button onclick='myFunct()'>PRESS</button>
<button onclick='myFunct2()'>PRESS</button>
    
<div id='line'>
    <div id='one'></div>
    <div id='gap'></div>
    <div id='two'></div>
...