CSS 3欄佈局

Question

我有這樣的小提琴： https://jsfiddle.net/fgzgeg68/1/

用下面的代碼HTML：

<div class="testContainter"> 
    <div class="leftPart"> 
    Short Fixed width Text 
    </div> 
    <div class="middlePart"> 
    The long text here should responsivley wrap within this div, and not wrap the div itself onto a new line. 
    </div> 
    <div class="rightPart"> 
    Short Fixed width Text 
    </div> 
</div> 

和CSS：

.testContainter 
    { 
     position: relative; 
    } 
    .leftPart { 
    width : 150px; 
    float: left; 
    border : 1px solid red; 
    } 
    .middlePart {  
    float: left; 
    border : 1px solid green; 
    } 
    .rightPart { 
    width : 150px; 
    float: right; 
    border : 1px solid blue; 
    } 

我想實現的是，中心div不會換行到新行，而是需要縮小或增加寬度作爲「中心」列，並且其中的文本應該包裹。 Thanx。

Answer 1

這是你在找什麼？

.middlePart { 
    width : calc(100% - 306px); 
    float: left; 
    border : 1px solid green; 
} 

Answer 2

我終於明白，你想要得到什麼（至少，我希望）：

.testContainter { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    text-align: center; 
    } 
    .leftPart { 
    width : 150px; 
    float: left; 
    border : 1px solid red; 
    } 
    .middlePart {  
    display:inline-block; 
    border : 1px solid green; 
    max-width: 700px; 

    } 
    .rightPart { 
    width : 150px; 
    float: right; 
    border : 1px solid blue; 
    } 

fiddle