固定内联块div,负边距和浮动浮动:-4px有什么特别之处？

Question

这很奇怪.我正在尝试在右浮动div旁边有一个固定宽度的div,我不想重新排序div(因为这是分布式主题).所以我在固定div上使用负边距右边,我觉得奇怪的是:如果它是-4px或更小,那么浮动移动到一边; 否则,它会保持在低于.

与戏剧的代码现场演示在jsbin,其中有这样的:

<style>
  .container {
    width: 200px;
    height: 200px;
  }
  .box {
    width: 100px;
    height: 100px;
  }
  .one {
    margin-right: -4px; /* If <= -4, .two box shifts up */
    display: inline-block;
  }
  .two {
    float: right;
  }
</style>
  <div class="container">
    <div class="box one"></div>
    <div class="box two"></div>
  </div>

有人可以解释这个谜吗？在这种情况下,数字-4有什么特别之处？

Answer 1

4px恰好是那个“空间”的宽度font-size。

如果您将 更改font-size为#container，32px则它会中断。

解决此问题的明智方法包括：

• 删除margin-right: -4px然后删除divHTML 中 s之间的空格。
• 不要使用display: inline-block. 相反，float: left左边div，float: right右边div。
  • 如果您担心容器上没有固定装置时会破裂，那么您必须清除漂浮物。在容器上height使用，或使用clearfix。 overflow: hidden
  • 与overflow: hidden（除非您有特定问题，否则使用此选项）
  • 与清除修复