面板左 - 中 - 右内容，结果不同

Question

结果应如何： 左（静态宽度） - 中间部分应填充内容 - 右（静态宽度）

当使用jsFiddle时，有一个解决方案，但在真实网站中它不起作用。在网站中，它看起来像没有CSS时设置样式。但即使它在CSS中设置它也不会填充中间部分，它总是重叠左/右面板并占据整个网页的100％宽度。

外观如何：

#ContentPanel1 {
    text-align:center
}
#ContentLeft1 {
    background:Yellow;
    float: left;
    width: 80px;
}
#ContentRight1 {
    background:Blue;
    float: right;
    width: 80px;
}
#ContentMiddle1 {
    text-align:left;
    background:Orange;
    margin:0 auto; 
    display:inline-block
    width: 100%;
}

<br />
    <div id="ContentPanel1">
        <div id="ContentLeft1">
            This part should be displayed on left side              
        </div>
        <div id="ContentRight1">
            This part should be displayed on right side            
        </div>
        <div id="ContentMiddle1">
            This part should be fit into the middle of the other parts
        </div>
    </div>

在IE和Firefox中看起来如何：

    <br />
    <div style="text-align: center;" id="ContentPanel1">
        <div id="ContentLeft1" style="background-color: Yellow; float: left; width: 80px;">
            This part should be displayed on left side                
        </div>
        <div id="ContentRight1" style="background-color: Blue; float: right; width: 80px;">
            This part should be displayed on right side             
        </div>
        <div id="ContentMiddle1" style="text-align: left; background-color: Orange; margin: 0 auto; display: inline-block; width: 100%;">
            This part should be fit into the middle of the other parts
        </div>
    </div>

Answer 1

您可以使用css calc作为您的建议。 Here是浏览器对此的支持。

#ContentPanel1 {
    text-align:center
}
#ContentLeft1 {
    background:Yellow;
    float: left;
    width: 80px;
}
#ContentRight1 {
    background:Blue;
    float: right;
    width: 80px;
}
#ContentMiddle1 {
    text-align:left;
    background:Orange;
    margin:0 auto; 
    display:inline-block
    width: calc(100% - 80px - 80px); // or width: calc(100% - 160px);
}

Answer 2

你可以试试＆＃39; calc＆＃39;功能，中间内容有100％ - （两个面板宽度）。

＆＃13;

＆＃13;

#ContentPanel1 {
    text-align:center
}
#ContentLeft1 {
    background:Yellow;
    float: left;
    width: 80px;
}
#ContentMiddle1 {
    background:Orange;
    float: left;
    width: calc(100% - 160px);
}
#ContentRight1 {
    background:Blue;
    float: right;
    width: 80px;
}

＆＃13;

<div id="ContentPanel1">
  <div id="ContentLeft1">
    This part should be displayed on left side              
  </div>
  <div id="ContentMiddle1">
    This part should be fit into the middle of the other parts
  </div>
  <div id="ContentRight1">
    This part should be displayed on right side            
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;