Div寬度等於兩個其他div之間的差距

Question

我在一個容器中組織了幾個div。

$(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

更新 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()做到這一點。

使第一個div浮動：左，右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; 
}