基于表格/表格单元格的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上不起作用

回答

相关问题