Div ширина равна разрыву между двумя другими divs

Question

У меня есть несколько divs в контейнере, организованных в ряд.

$(document).ready(function() { 
 
    $('#swap').click(function() { 
 
    $('#container').find('div.blue').each(function() { 
 
     $(this).removeClass('blue'); 
 
     $(this).addClass('green'); 
 
    }); 
 
    }); 
 
});

#container { 
 
    border: 1px solid black; 
 
    border-right: 0px; 
 
    width: 500px; 
 
    min-height: 40px; 
 
} 
 
#left { 
 
    float: left; 
 
} 
 
#right { 
 
    float: right; 
 
} 
 
.purple { 
 
    background-color: #9471AB; 
 
    width: 70px; 
 
} 
 
.red { 
 
    background-color: #D48A8A; 
 
    width: 40px; 
 
} 
 
.green { 
 
    background-color: #A4B995; 
 
    width: 50px; 
 
} 
 
.blue { 
 
    background-color: #95AEB9; 
 
    width: 75px; 
 
} 
 
.red,.green,.blue,.purple { 
 
    height: 40px; 
 
    float: left; 
 
    box-sizing: border-box; 
 
    border-right: 1px black solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="left"> 
 
    <div class="purple"> 
 
    </div> 
 
    <div class="purple"> 
 
    </div> 
 
    <div class="purple"> 
 
    </div> 
 
    </div> 
 
    <div id="middle"> 
 
    <div class="red"> 
 
    </div> 
 
    </div> 
 
    <div id="right"> 
 
    <div class="blue"> 
 
    </div> 
 
    <div class="blue"> 
 
    </div> 
 
    <div class="green"> 
 
    </div> 
 
    </div> 
 
</div> 
 
<br/> 
 
<button id="swap">Swap</button>

.purple, .blue, .green определены ширины, но не .red. В этом примере я дал ему ширину.

Хотелось бы, чтобы .red имел ширину, равную промежутку между #left и #right. Я мог бы поставить его под все из них и сделать ширину равной ширине контейнера, но я ищу что-то дружелюбное с текстом.

Я добавил кнопку, которая изменяет все .blue на .green. .red должен растягивать свою ширину соответственно, чтобы не было зазора. В некоторых сценариях могут быть два .green и один .blue справа, некоторые могут быть три .blue или три .green. И т. Д. Он должен быть динамическим и не вычисляться по ширине других классов.

Answer 1

flexbox раствора

$(document).ready(function() { 
 
    $('#swap').click(function() { 
 
    $('#container').find('div.blue').each(function() { 
 
     $(this).removeClass('blue'); 
 
     $(this).addClass('green'); 
 
    }); 
 
    }); 
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 

 
#container { 
 
    border: 1px solid black; 
 
    border-right: 0px; 
 
    width: 500px; 
 
    margin: 10p auto; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
#left { 
 
    display: flex; 
 
} 
 
#middle { 
 
    display: flex; 
 
    flex:1; 
 
} 
 

 
#right { 
 
    display: flex; 
 
} 
 
.purple { 
 
    background-color: #9471AB; 
 
    width: 70px; 
 
} 
 
.red { 
 
    background-color: #D48A8A; 
 
    flex:1; 
 
} 
 
.green { 
 
    background-color: #A4B995; 
 
    width: 50px; 
 
} 
 
.blue { 
 
    background-color: #95AEB9; 
 
    width: 75px; 
 
} 
 
.red,.green,.blue,.purple { 
 
    height: 40px; 
 
    border-right: 1px black solid; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="left"> 
 
    <div class="purple"> 
 
    </div> 
 
    <div class="purple"> 
 
    </div> 
 
    <div class="purple"> 
 
    </div> 
 
    </div> 
 
    <div id="middle"> 
 
    <div class="red"> 
 
    </div> 
 
    </div> 
 
    <div id="right"> 
 
    <div class="blue"> 
 
    </div> 
 
    <div class="blue"> 
 
    </div> 
 
    <div class="green"> 
 
    </div> 
 
    </div> 
 
</div> 
 
<br/> 
 
<button id="swap">Swap</button>

Answer 2

Update http://jsfiddle.net/w4rxg7v3/1/

Такой подход позволяет иметь динамическую ширину левые и правые, и средние заполнит остальные.

<div class="middle"> 
    <div class="left"></div> 
    <div class="right"></div> 
    <p>Content for Middle: cupiditate blanditiis dolorum natus!</p> 
</div> 

=========================================== =================

http://jsfiddle.net/w4rxg7v3/

Вы можете сделать это с помощью float и calc().

Сделать 1-й дивит поплавок: влево, вправо div поплавок: справа, затем сделать средний поплавок либо влево, либо вправо. Затем установите его ширину, чтобы calc(100% - sumofwidthothertwodivs)

body { 
     min-width: 500px;  
} 
.left,.middle,.right { 
    height: 80px; 
} 

.left { 
    background-color: blue; 
    width: 200px; 
    float: left; 
} 
.middle { 
    width: calc(100% - 400px) ; 
    float: right; 
    background-color: red; 
} 
.right { 
    background-color: green; 
    float: right; 
    width: 200px; 
}