＃＃＃＃＃＃

Question

我有一个类似这样的html：

<!doctype html>
<head>
<style>
body { background-color: #eee; }

.container {
  display: table;
  border-spacing: 1.5em 0;
 }

.cell {
  display: table-cell;
  background-color: orange;
  border-radius: .5em;
  padding: 1em;
  width: 50%;
}
</style>
</head>
<body>
  <div class="container">
    <div class="cell">Left cell</div>
    <div class="cell">#</div>
  </div>
</body>

，我对width属性感到困惑。与值10%相比，值50%产生的视觉宽度更多。为什么？

注意：我故意错过了width的css .container属性，以便观察CSS如何/为什么以这种方式运行。

请参见下图：

＃＃＃＃＃＃

Answer 1

问题是您的容器的display: table样式。将表结构及其单元格的单个width属性混合在一起是不明智的。因此，可以使用div layout或通过container的{{1}}属性控制单元格的宽度。请注意，典型的表格样式以自己的方式维护其单元格的宽度比率。另外，我建议向您的style.width添加一个width属性。然后，您可以玩container的{{1}}，亲眼看看cell的工作原理。

为什么较少的CSS宽度会导致更多的视觉宽度？

＃＃＃＃＃＃

＃＃＃＃＃＃

1 个答案: