为什么使用表单元格css样式的页面在相同的宽度比例下显示不同的div宽度？

Question

我有以下页面，它使用表单元格css样式来实现三列布局：

HTML：

<html>
  <body>
    <div id="container" class="table, fullwidth">
      <div id="header" class="table, fullwidth">Header</div>
      <div id="main" class="table, fullwidth">
        <div id="left" class="cell">Left</div>
        <div id="center" class="cell">Center Center Center Center Center Center Center </div>
        <div id="right" class="cell">Right</div>
      </div>
    <div id="footer" class="table, fullwidth">Footer</div>
  </div>
 </body>
</html>

CSS：

  div.table { display: table; position: inherit; }
  div.fullwidth { width: 100%; }
  div.cell { display: table-cell; }
  div#header { background-color: #ffcccc; }
  div#footer { background-color: #ccffff; }
  div#left, div#right { width: 17%; background-color: #ccffcc; }
  div#center { width: 51%; background-color: #ffccff; }

JSFiddle地址：https://jsfiddle.net/q7g8k5dy/

我正在尝试将左右两列的宽度设置为中心列宽度的三分之一，如果我将百分比宽度设置为低于17% (对于左右列)和51% (对于中间列)，就可以在JSFiddle窗口中工作。

但是，当我将左右宽度设置为超过17% (将中心宽度设置为超过51%)时，三列不再占据页面的整个宽度，并且在右div的右边缘和页面的右边缘之间存在间隙。占用的总宽度越来越小，直到我将左侧/右侧div设置为24%的宽度，将中心设置为72%，于是我得到了一个非常不均匀的布局，左侧div比右侧宽得多。

这里发生什么事情？我是否应该接受这是某种“魔法”，当使用百分比宽度来实现所需的布局时(当使用表格单元格样式时)，最好的做法是使用尽可能低的百分比？

Answer 1

你没有正确地授课。两个类名之间没有,。此外，如果您希望自动调整中心dic的宽度，则不需要指定它的宽度。我给左和右div宽度为20% (即，1/3的60%)，所以中心将保持60%。

​

div.table { display: table; position: inherit; }
div.fullwidth { width: 100%; }
div.cell { display: table-cell; }
div#header { background-color: #ffcccc; }
div#footer { background-color: #ccffff; }
div#left, div#right { width: 20%; background-color: #ccffcc; }
div#center { background-color: #ffccff; }

<html>
<head></head>
<body>
    <div id="container" class="table fullwidth">
      <div id="header" class="table fullwidth">Header</div>
      <div id="main" class="table fullwidth">
        <div id="left" class="cell">Left</div>
        <div id="center" class="cell">Center Center Center Center Center Center Center </div>
        <div id="right" class="cell">Right</div>
      </div>
    <div id="footer" class="table, fullwidth">Footer</div>
  </div>
</body>
</html>

​

希望这就是你要找的。