面板與左 - 中 - 右內容有不同的結果

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

您可以嘗試'calc'功能，中間內容有100％ - （兩個面板寬度）。

#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; 
 
}

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