基於表格/表格單元格的3列布局在Chrome和Opera上不起作用

我不確定爲什麼這不適用於Chrome或Opera。我沒有看到任何與其他瀏覽器不兼容的東西。基於表格/表格單元格的3列布局在Chrome和Opera上不起作用

任何想法？

 <style> 
      #page_body_table { 
       display: table; 
       width: 100%; 
       vertical-align: center; 
      } 

      #page_body_left { 
       display: table-cell; 
       max-width: 100%; 
      } 

      #page_body_middle { 
       display: table-cell; 
       width: 700px; 
       border: 1px solid black; 
      } 

      #page_body_right { 
       display: table-cell; 
       max-width: 100%; 
      } 

      @media screen and (max-width: 700px) { 
       #page_body_left, #page_body_right { 
        display: none; 
       } 
      } 
     </style> 
     <div> 
     <center id="page_body_table"> 
      <div id="page_body_left"> 

      </div> 
      <div id="page_body_middle"> 
       this is content of page 
      </div> 
      <div id="page_body_right"> 

      </div> 
     </center> 
    </div>

來源

2014-09-12 HelpNeeder

不適用於IE或Firefox的我。你能提供你想要達到的目標嗎？ – bobbyg603 2014-09-12 14:37:55

http://viamarketing.net/dev/index.php 2邊欄必須是靈活的，並消失在一定的寬度中間必須保持最大寬度的瓦特/寬度在這一點上。然後在像950px邊的列消失，我希望中間是響應和縮小頁面寬度。 – HelpNeeder 2014-09-12 14:44:57

必須添加：到#page_body_table，使它看起來像這樣：

#page_body_table { 
    display: table; 
    width: 100%; 
    vertical-align: center; 
    table-layout: fixed; 
}

這裏有一個fiddle。

Exaplanation可以發現here。長話短說：如果佈局是自動的，而不是固定的，寬度取決於單元格的內容，在你的情況下它是沒有的，所以中間的單元格被拉伸。如果它是固定的，則將剩餘空間分配給空單元格。

來源

2014-09-12 14:38:13

儘管如此，我必須有中間欄的響應。任何方式來避免「固定」？ – HelpNeeder 2014-09-12 14:43:05

不理我的最後一條評論，我只是刪除該標籤，並用「在一定寬度上自動替換」，謝謝你，先生。 – HelpNeeder 2014-09-12 14:49:19

基於表格/表格單元格的3列布局在Chrome和Opera上不起作用

回答

相關問題