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