Question

有什么问题？

我正在尝试将div中的两个框对齐，以便在覆盖整个页面的同一级别上。 div的宽度应为左侧40％，右侧60％。然后内部div的高度/宽度应为height: 100%;和width: 90%;。

CSS正在为正确的div添加额外的边距，因此使div与顶部不对齐。

请参阅以下两个示例：

Not working codepen - 与正确的宽度不一致。

Aligned codepen - 均匀对齐宽度不正确。

如您所见，两个codepen示例中唯一的变化是TicketMainRight div的宽度已从width: 60%;更改为width: 40%;。现在这让我有20％免费，这是我不想要的。我希望保持60％的宽度而不会从顶部增加边距。

当只增加宽度时，为什么CSS从顶部添加超过2.5％的边距？

Answer 1

不是＆＃34;增加超过2.5％＆＃34;，它提供宽度的2.5％的余量。

保证金百分比是根据元素的宽度计算的。至于为什么，请参阅this answer。

Answer 2

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="workflow-dashboard">
  <div id="workflow-plan"></div>
  <div id="workflow-control"></div>
</div>

和

margin-left: 2.5%;

是相对于父母的宽度。所以40％的2.5％是小于60％的2.5％。你可以使用em。

Answer 3

百分比边距和填充值是相对于父元素宽度的此外，边距和填充符合元素的尺寸（请参阅box model）。因此，如果宽度为100％，宽度为2.5％，则宽度为102.5％。如果您不希望在宽度增加时边距增加，则应使用固定边距。

CSS百分比对齐问题

3 个答案: